用 CSS 绘制三角形

什么是用 CSS 绘制的三角形？

来看一个具体的示例，一个红色的向右的三角形：

它是如何用纯 CSS 方式绘制出来的呢？

先创建一个空的 div：

<div class="arrowRight"></div>

设置一个 1px 的黑色实心边框，高度和宽度均设置为 100px：

.arrowRight {
	border: 1px solid black;
	width: 100px;
	height: 100px;
}

现在把它的边框增大到 60px：

.arrowRight {
	border:  1px solid black;
	width: 100px;
	height: 100px;
}

现在让各个边框具有不同的颜色：

border: 60px solid;
border-top-color: blue;
border-right-color: yellow;
border-bottom-color: green;
border-left-color: red;

现在，把 div 的宽度和高度逐渐减小，直至到 0!

width: 100px;
height: 100px;

三角形出现了！不过有四个!

现在把四个 border 分开定义：

border: 60px solid;
border-top-color: blue;
border-right-color: yellow;
border-bottom-color: green;
border-left-color: red;

border-top: 60px solid blue;
border-right: 60px solid yellow;
border-bottom: 60px solid green;
border-left: 60px solid red;

结果还是类似上一步。

现在如果只想要一个向右的箭头，是否只要保留 border-left 的定义即可了呢？让我们试试！

现在把其它三个 border 定义去掉，只保留 border-left：

border-top: 60px solid blue;
border-right: 60px solid yellow;
border-bottom: 60px solid green;
border-left: 60px solid red;

结果什么也没有了！为什么呢？

现在先恢复原状，然后只把 border-right 定义去掉：

border-top: 60px solid blue;
border-right: 60px solid yellow;
border-bottom: 60px solid green;
border-left: 60px solid red;

结果用逐渐减小的宽度模拟，可以看到 border-top 和 border-bottom 的宽度损失了一半！显然它们的宽度是由 border-left 和 border-right 共同决定的！反之，border-left 和 border-right 的高度则由它们决定！双方互为支撑！

现在进一步把 border-bottom 定义去掉：

border-top: 60px solid blue;
border-right: 60px solid yellow;
border-bottom: 60px solid green;
border-left: 60px solid red;

结果用逐渐减小的高度模拟，可以看到 border-left 的高度也因此损失了一半！

所以，如果再继续去掉 border-top，那就全完蛋了！

要维持住 border-left 的高度，我们要保留 border-top 和 border-bottom！

但又不能显示出来，那么可以使用透明属性：transparent！

border-top: 60px solid blue;
border-right: 60px solid yellow;
border-bottom: 60px solid green;
border-left: 60px solid red;

最终的代码及结果如下：

width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid red;

The End，Thank you for watching！