CSS三角形生成器

什么是CSS三角形生成器？

如何使用CSS三角形生成器

1. 1

   选择方向：在方向选择区域点击你需要的三角形指向方向按钮，点击后方向按钮会高亮标记，生成的三角形会自动适配你选择的方向展示预览。

2. 2

   调整参数：拖动『边长』『边框宽度』对应的滑块，你也可以直接在输入框输入具体数值，调整完成后预览区会实时更新三角形大小。

3. 3

   选择颜色：点击颜色选择框唤起系统取色器，挑选你需要的三角形填充颜色，选好后预览区会立刻同步新的颜色效果。

4. 4

   复制代码：点击下方结果代码框，直接选中所有生成好的 CSS 代码复制，就能把代码粘贴到你的项目样式文件中使用了。

什么场景会用到？

计算示例

注意事项

• 本工具基于原生CSS border三角形技巧实现，仅支持生成直角等腰三角形，不支持任意角度或不等边三角形。
• 如果三角形显示错位，请检查你的元素盒模型是否被全局CSS的box-sizing属性修改，本工具生成的代码默认适配标准盒模型。
• 透明边框的颜色会继承父元素背景，若背景是渐变或图片，可能会出现三角形边缘不对齐的情况。
• 生成的三角形最小支持1px边长，边长过大时会占用较多的border空间，不建议生成超过100px边长的三角形。

常见问题

参考资料

• MDN Web Docs CSS border 规范文档
• W3C CSS Box Model Module 官方规范

本工具基于CSS前端开发通用的border三角形实现方案，所有生成代码均经过多浏览器兼容性测试，由工具集编辑组维护更新。