CSS 绘制三角形

CSS (Cascading Style Sheets，层叠样式表)，用于指定 HTML 中元素的样式。由浏览器渲染。本质上一种图像绘制。既然是图像绘制，能否绘制常见的形状比如三角形呢？

矩形

在绘制三角形之前，先来看看如何绘制矩形。

绘制矩形比较简单，主要用到了 border 属性。也就是一个东西四边都是边框就是矩形了。

<span style="border:1px solid black">矩形</span>

矩形

把中间的文字去掉就可以了。因为没有文字支撑。所以需要指定宽度或者使用空格（样式是样式，内容是内容，不要混淆，这里我偷懒就用空格来演示了）。

<span style="border:1px solid black">　　</span>

　　

但是这跟绘制三角形有什么关系呢？

这就不得不提一个 CSS 的花招。

三角形花招

如果把矩形的四边涂上颜色。看起来是这样的。

<span style="border: 100px solid;border-left-color: #0066cc;
             border-right-color: #0066cc;
             border-top-color: white;
             border-bottom-color: white;
             display: inline-block;">囧</span>

囧

把中间的文字去掉，就变成了这样。

很明显出现了四个三角形。那怎么得到一个三角形呢？

把其他三个三角形隐藏。

<span style="border: 100px solid;
			 border-left-color: #0066cc;
			 border-right-color: transparent;
			 border-top-color: transparent;
			 border-bottom-color: transparent;
			 display: inline-block;"></span>

原理

这究竟发生了什么？矩形的边是怎么变成三角形的？

先从头看起。回到最开始的图形。

囧

注意看会发现，边其实不是一条线或者矩形，而是一个等腰梯形。

当把文字去掉了之后就变成了三角形。

这时候隐藏其他的三角形即可。

也就是说原来边缘并不是我们想象中的一条线，而是一个梯形，当元素的宽度和高度都为0时，梯形就变成了三角形。

动态过程是这样的。

隐藏的过程是这样的

扩展

利用类似的技巧就可以画出很多很多有趣的图形。CSSIcon 上有很好的示例。

点开其中一个，鼠标移到属性上，会有详细介绍怎么实现的。

当然还可以用 CSS 绘制微信微笑的表情（我就偷懒不写了）

后记

三个月前看到这个 CSS 花招，到现在终于把这个坑填了。在写的时候多次想放弃。最有意思的是将原理用动态的方式展现，顺便学了一点 CSS 动画的皮毛。其实绘制三角形最简单的方法是使用 ► 符号（逃