Dirección
top / 20px
Salida
border-bottom-color: #...
Herramientas de diseño
Generador de triángulos CSS con vista previa en vivo
Elige una dirección, tamaño y color para generar un triángulo CSS puro con bordes, con vista previa en vivo y código copiable.
CSSTriánguloForma
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Generador de triángulos CSS
Elige una dirección, tamaño y color para generar un triángulo CSS puro con bordes, con vista previa en vivo y código copiable.
最终边框魔术 (CSS)
Casos de uso
- Crea una flecha para un tooltip o popover
- Genera una decoración de insignia en esquina
- Prueba las dimensiones de un triángulo CSS con bordes
Cómo usar
- Elige la dirección del triángulo
- Define ancho, alto y color
- Previsualiza y copia el CSS
Entrada y salida de ejemplo
FAQ
¿Cómo funciona un triángulo CSS con bordes?
El elemento tiene ancho y alto de cero. Los bordes de color y transparentes se combinan para formar el triángulo visible.
¿Puede crear polígonos irregulares?
Esta herramienta genera triángulos direccionales estándar. Usa una herramienta de clip-path para polígonos más complejos.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Clip Path CSS
Clip Path CSS — Generador de formas
Genera formas CSS clip-path a partir de ajustes predefinidos y controles sencillos con una vista previa en vivo: útil para tarjetas en ángulo, insignias, recortes de imagen y maquetaciones decorativas.
CSS clip-path Forma
Generador de cintas CSS
Generador de cintas CSS — Estilos de insignia en esquina
Genera visualmente CSS de cinta en esquina inclinada para tarjetas. Cambia el texto, los colores, el desplazamiento, el ancho y el tamaño de fuente para insignias de oferta, agotado y estados similares.
CSS Insignia Cinta