Cómo usar: Generador de triángulos CSS
- Haz clic en una dirección: arriba, abajo, izquierda, derecha o una de las esquinas.
- Define el ancho, el alto y el color.
- Elige Bordes (funciona en todos los navegadores, ideal para flechas con
::before/::after) o clip-path (más fácil de leer y permite degradados). - Copia el CSS en un elemento o pseudoelemento.
Dos formas de dibujar un triángulo
El truco del border: un elemento con ancho y alto cero solo muestra sus bordes, y cada borde es un triángulo que se encuentra en el centro. Si haces transparentes tres de ellos y coloreas el cuarto, obtienes una flecha, sin necesidad de imágenes. Su tamaño depende del grosor de los bordes.
clip-path: una caja normal con clip-path: polygon(50% 0, 100% 100%, 0 100%). Es más fácil de leer y de dimensionar, y se puede rellenar con un degradado o una imagen.
Ejemplo de flecha para tooltip
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Más formas: Generador de Clip-path, Generador de Border Radius, Generador de blobs SVG.
También se busca como: triángulo css, flecha css, flecha tooltip css, triángulo border css, caret css, forma triángulo css, flecha globo de diálogo css.
Herramientas que combinan con: Generador de triángulos CSS
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Generador de máscaras CSS — Haz que imágenes y secciones se desvanezcan en lugar de cortarse en seco: difumina un borde, arriba y abajo, los cuatro bordes, una viñeta radial o un foco, corta el elemento en franjas, o enmascáralo con una forma (estrella, corazón, hexágono, flecha…) con bordes suaves y difuminados que clip-path no puede lograr.
- Generador de CSS Grid — Define las columnas, filas y gap, y luego arrastra sobre las celdas para crear áreas como header, sidebar y main.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo hago un triángulo en CSS?
Asigna width: 0 y height: 0 a un elemento y luego define los bordes: para una flecha hacia arriba, pon los bordes izquierdo y derecho transparentes y el borde inferior de color. Este generador lo escribe por ti para cualquier dirección y tamaño.
¿Cómo añado una flecha a un tooltip?
Añade un pseudoelemento ::after con content: "", colócalo en el borde del tooltip y aplícale los bordes del triángulo que generas aquí.
¿Triángulo con border o con clip-path?
Los bordes funcionan en todos los navegadores y son el estándar para flechas pequeñas en pseudoelementos; clip-path es más fácil de dimensionar y admite degradados.
¿Un triángulo CSS puede tener borde o sombra?
Apila dos triángulos (uno un poco más grande, en el color del borde) o usa clip-path en un contenedor con filter: drop-shadow() para la sombra.
¿Puedo instalar Generador de triángulos CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de triángulos CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.