Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de triángulos CSS

CSS Triangle Generator

Genera triángulos isósceles de CSS puro con bordes —dirección, base, altura y color a tu elección— y copia la regla, nítida a cualquier densidad.

Ruta de la tarea / de la entrada al resultado

Elige la dirección

Funciona en local · No se sube nada

Cómo funciona Generador de triángulos CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo crear un triángulo CSS

  1. 01

    Elige la dirección

    Elige Arriba, Derecha, Abajo o Izquierda en Dirección. La vista previa se actualiza al instante: la técnica colorea un borde y mantiene transparentes los bordes vecinos. El espacio de trabajo comienza con un triángulo hacia arriba.

  2. 02

    Define el tamaño

    Ajusta Anchura de base y Altura del triángulo entre 8 y 180 px, en pasos de 1 px. Si apunta arriba o abajo, la anchura es la base y la altura mide hasta la punta. Si apunta a izquierda o derecha, la altura es la base vertical y la anchura mide el alcance horizontal. Por defecto mide 72 px en horizontal y 64 px en vertical.

  3. 03

    Elige el color de relleno

    Define Color de relleno con cualquier valor hexadecimal de seis dígitos; el valor por defecto es #0f4cff. La vista previa en vivo y la declaración border-color generada siempre permanecen sincronizadas, así que lo que ves es exactamente lo que se copia.

  4. 04

    Comprueba el estado de la vista previa

    La vista previa en vivo se vuelve a renderizar con cada cambio y la insignia de estado muestra CSS VÁLIDO cuando todos los valores están en rango. Un valor fuera de rango la cambia a REVISA LOS VALORES y bloquea la copia y la descarga hasta que corriges el control resaltado.

  5. 05

    Prueba el ajuste de ejemplo

    Cargar ejemplo crea un triángulo que apunta a la derecha, con 104 px de alcance horizontal, 86 px de base vertical y relleno #ffd11a. Restablecer devuelve los valores predeterminados.

  6. 06

    Copia o descarga el CSS

    Pulsa Copiar CSS para copiar la regla .triangle al portapapeles, o Descargar .css para guardarla como toolars-triangle.css. La regla pone ancho y alto a cero y declara los cuatro bordes, lista para pegar en cualquier hoja de estilos.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de triángulos CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de triángulos CSS en realidad

Los carets de los desplegables, los punteros de los tooltips y los separadores de migas de pan necesitan un triángulo pequeño y nítido, y un archivo de imagen es la herramienta equivocada: se difumina en pantallas de alta densidad y añade una petición a la página. Un triángulo construido con bordes CSS es independiente de la resolución y cambia de color con un solo valor hexadecimal. Generador de triángulos CSS renderiza la forma localmente mientras ajustas dirección, tamaño y relleno, así que iterar lleva segundos. Cuando se ve bien, un clic deja la regla .triangle terminada en tu portapapeles.

Preguntas frecuentes

¿Cómo funciona un triángulo de CSS puro?
El elemento recibe ancho y alto cero más cuatro bordes. Colorear un borde mientras los dos adyacentes permanecen transparentes deja un triángulo limpio: la regla .triangle generada muestra exactamente qué borde lleva el Color de relleno para la dirección elegida, y el borde opuesto a la punta colapsa a cero.
¿Qué tamaños puedo generar?
Ancho de la base y Altura del triángulo aceptan valores de 8 a 180 px en pasos de 1 px. Un valor fuera de rango cambia el estado de la vista previa a REVISA LOS VALORES y bloquea la copia y la descarga hasta que corriges el control resaltado, así que la regla exportada siempre es válida.
¿El triángulo es siempre simétrico?
Sí. Para Arriba y Abajo, los dos bordes laterales transparentes toman cada uno la mitad del ancho de la base, así que el vértice queda centrado sobre la base; para Izquierda y Derecha, los bordes superior e inferior reparten la altura del mismo modo. Todo triángulo generado es isósceles: las formas inclinadas o rectangulares necesitan otra técnica, como clip-path.
¿Cómo cambio el color o el tamaño del triángulo después?
Edita directamente la regla generada: solo un borde lleva el color de relleno, los dos adyacentes son transparentes y el borde opuesto a la punta es cero. Cambiar el único valor hexadecimal lo recolorea, y ajustar los anchos de borde lo remodela: no necesitas el generador tras la primera copia.
¿Funcionará el resultado en todos los navegadores?
Sí. Los triángulos basados en bordes son una de las técnicas más antiguas de CSS y no necesitan imágenes, SVG ni clip-path, así que la regla generada se renderiza igual en todos los navegadores modernos, a cualquier densidad de pantalla y sin una sola petición de red.
¿Se sube o se guarda algo?
No. La vista previa se renderiza localmente a partir de valores de estilo validados y, como indica el pie del espacio de trabajo, ningún valor generado entra en almacenamiento, registros, analítica ni la red.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear