CSS 三角形生成器

CSS 三角形常用于提示框箭头、下拉菜单的小箭头、飘带和装饰性的角。经典方法是让一个盒子的宽高为零，再给其中一条边框上色：边框相交处会被斜切，上色的那条边框就成了三角形。现代方法是用 clip-path: polygon() 裁切普通盒子。这个生成器会为八个方向都写出这两种代码，并在浏览器里并排预览。

使用方法

1. 选择三角形指向的方向。
2. 设置宽度和高度，或勾选“等边三角形”让三边相等。
3. 选择颜色，需要的话再设置类名。
4. 复制 border 方式的 CSS 或 clip-path 方式的 CSS，以及 HTML 元素。

计算公式

up: border-left = border-right = width ÷ 2 (transparent), border-bottom = height (color) · corner: one colored border = height, one transparent border = width · equilateral: height = width × √3 ÷ 2

向左和向右的三角形中，角色互换：上下边框是高度的一半，上色的侧边边框是宽度。clip-path 用相对于盒子的百分比列出各个顶点。

示例

默认的向上三角形，100 × 80 px、#2563eb，在 0 × 0 的盒子上写作 border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #2563eb;，或在 100 × 80 的盒子上写作 clip-path: polygon(50% 0, 100% 100%, 0 100%)。勾选“等边三角形”后，高度变为 100 × √3 ÷ 2 = 86.6 px。