CSS三角形生成器 - 用Border Trick创建CSS三角形 在线工具
使用border trick和clip-path polygon生成CSS三角形，实时预览。8个方向、3种三角形类型、多种输出格式 — 100%客户端处理，数据不发送到服务器。
常见问题
什么是CSS三角形？它是如何工作的？
CSS三角形是纯CSS创建的三角形，不需要图片或SVG。最常见的技术是"边框技巧"：当元素宽高为零时，边框在对角线接缝处相遇。将四个边框中的三个设为透明、一个着色，可见的边框就形成了三角形。
如何使用这个CSS三角形生成器？
1. 使用方向面板选择三角形方向。2. 选择三角形类型：等边、等腰或不等边。3. 使用滑块或数字输入调整宽度和高度。4. 选择颜色。5. 在预览中实时查看更新。6. 一键复制生成的CSS代码。
我的数据安全吗？会发送到服务器吗？
是的，您的数据完全安全。此工具完全在浏览器中使用客户端JavaScript运行。没有任何数据发送到服务器。
边框技巧和clip-path方法有什么区别？
边框技巧创建零宽高元素，使用边框宽度和颜色形成三角形。浏览器支持极好但不能应用box-shadow。clip-path方法使用clip-path: polygon()将正常元素裁剪为三角形，允许使用背景、渐变和阴影。
什么时候应该使用CSS三角形？
CSS三角形常用于：工具提示箭头、下拉菜单指示器、面包屑分隔符、手风琴指示器、对话气泡尾巴、装饰性分割线。
为什么不能给CSS三角形添加box-shadow？
边框技巧的三角形是零宽零高的元素。box-shadow应用于元素的盒子，没有面积。请改用clip-path方法或filter: drop-shadow()。
什么是等边、等腰和不等边三角形？
等边三角形三边相等，所有角为60度。高度由宽度×√3/2数学确定。等腰三角形有两边相等，对称。不等边三角形三边各不相同，适合创建不对称箭头。
代码示例
// 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;