分类: 开发工具
CSS 三角形生成器
用边框技巧构建纯 CSS 三角形
选择方向、大小和颜色，构建一个尺寸为零、边框带颜色的盒子，让它呈现为三角形，并提供实时预览和可直接复制的 CSS 声明。一切都在你的浏览器中计算完成。
输出
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
CSS 三角形本质上是一个 `width: 0; height: 0;` 的盒子，把某一侧边框设为颜色，相邻两侧设为透明，这样只有带颜色那一侧边框的楔形会显示出来。手写时很容易搞反——选错了要设置颜色的那一侧，或者忘了把某条边框设为透明——因此这个工具会根据方向、大小和颜色直接生成四条边框声明，并在你调整时实时展示在真实的盒子上。
使用方法
- 选择方向：向上、向下、向左或向右。
- 设置大小和颜色。
- 把边框声明复制到你的样式表中。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 有内容会发送到服务器吗？
- 不会。预览是由浏览器渲染的真实 CSS 边框，声明代码也是在页面内组装的文本。
- 为什么三角形需要把宽度和高度都设为 0？
- 边框技巧依赖于各条边框在一点汇合，而不是围出一个矩形框。非零的宽度或高度会把楔形压扁成梯形。
- 可以用它做提示框或对话气泡的小箭头吗？
- 可以——这是最常见的用法。把三角形绝对定位到提示框的边缘，并将其颜色和提示框背景色保持一致即可。