Generador de Triángulos CSS - Crear Triángulos CSS con Border Trick en Línea
Genera triángulos CSS usando el truco de bordes y clip-path polygon con vista previa en vivo. 8 direcciones, 3 tipos de triángulos, múltiples formatos de salida — 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es un triángulo CSS y cómo funciona?
Un triángulo CSS es una forma triangular creada puramente con CSS, sin imágenes ni SVGs. La técnica más común usa el "truco de bordes": cuando un elemento tiene ancho y alto cero, sus bordes se encuentran en costuras diagonales. Al hacer tres de los cuatro bordes transparentes y colorear uno, el borde visible forma una forma triangular.
¿Cómo uso este generador de triángulos CSS?
1. Seleccione la dirección del triángulo usando el pad direccional. 2. Elija un tipo de triángulo: equilátero, isósceles o escaleno. 3. Ajuste el ancho y alto usando los controles deslizantes. 4. Elija un color usando el selector de color. 5. Vea el triángulo actualizarse en tiempo real en la vista previa. 6. Copie el código CSS generado con un clic.
¿Mis datos están seguros?
Sí, sus datos están completamente seguros. Esta herramienta se ejecuta completamente en su navegador usando JavaScript del lado del cliente. No se envían datos al servidor.
¿Cuál es la diferencia entre border trick y clip-path?
El border trick es el enfoque clásico: crea un elemento de ancho/alto cero y usa anchos y colores de borde para formar el triángulo. Tiene excelente soporte de navegadores pero no permite box-shadow ni background-image. El método clip-path usa clip-path: polygon() para recortar un elemento normal en forma de triángulo, permitiendo fondos, gradientes y sombras.
¿Cuándo debo usar triángulos CSS?
Los triángulos CSS se usan comúnmente para: flechas de tooltips, indicadores de menú desplegable, separadores de navegación, indicadores de acordeón, colas de burbujas de diálogo y divisores decorativos de sección.
¿Por qué no puedo agregar box-shadow a mi triángulo CSS?
Los triángulos border-trick son elementos de ancho/alto cero. La propiedad box-shadow se aplica a la caja del elemento, que no tiene área. Use el método clip-path o filter: drop-shadow() en su lugar.
¿Qué son triángulos equiláteros, isósceles y escalenos?
Los equiláteros tienen todos los lados iguales y todos los ángulos de 60°. Los isósceles tienen dos lados iguales, siendo simétricos. Los escalenos tienen todos los lados diferentes, útiles para flechas asimétricas.
Ejemplos de Código
// CSS Triangle Generator - JavaScript Implementation
// Generate CSS triangle using the border trick
function generateTriangleCSS(direction, width, height, color) {
const styles = { width: '0', height: '0' };
const halfWidth = width / 2;
const halfHeight = height / 2;
switch (direction) {
case 'up':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-bottom'] = `${height}px solid ${color}`;
break;
case 'down':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-top'] = `${height}px solid ${color}`;
break;
case 'left':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-right'] = `${width}px solid ${color}`;
break;
case 'right':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-left'] = `${width}px solid ${color}`;
break;
}
return Object.entries(styles)
.map(([prop, value]) => `${prop}: ${value};`)
.join('\n');
}
// Generate clip-path polygon
function generateClipPath(direction, width, height, color) {
const points = {
up: '50% 0%, 100% 100%, 0% 100%',
down: '0% 0%, 100% 0%, 50% 100%',
left: '100% 0%, 100% 100%, 0% 50%',
right: '0% 0%, 100% 50%, 0% 100%',
};
return `width: ${width}px;\nheight: ${height}px;\nbackground: ${color};\nclip-path: polygon(${points[direction]});`;
}
console.log(generateTriangleCSS('up', 100, 87, '#3B82F6'));
// width: 0; height: 0;
// border-left: 50px solid transparent;
// border-right: 50px solid transparent;
// border-bottom: 87px solid #3B82F6;