为什么只使用一个 Div？
2013年5月，我参加了 CSSConf，看到了Lea Verou 关于 border-radius 的演讲，你可能会认为这个属性很不起眼。但是这个演讲让我大开眼界，认识到 CSS 还有很多行为我是不了解的。回忆起我还是艺术生的那段时光，不断地推动着我成为所选媒介的专家。作为一个 Web 设计师，CSS 是我的媒介，因此我尽我所能地学习，探索它的极限。
为什么只有一个 Div？
回忆我以前学画的时候，课堂上还做了混合颜色的实验，我们就使用三原色，红、黄、蓝，创造出了其他颜色的光谱。这个实验的目的是让我们了解颜色的特性，同时这种限制也让我们明白了混合的力量。你当然可以买一只绿色的笔，但是你也可以使用蓝色和黄色把绿色做出来。限制你的可选项，会让你重新评估手头上已有的工具。
我决定开始一个使用CSS 绘画的项目，过段时间我就会给出一个只用 CSS 绘制的新东西。为了得到更大的挑战，探索 CSS 的潜力，我给自己定了这个限制，只是用一个 Div。不能直接买一只绿色的笔（添加更多的 Div），我要做的就是尽其所能地结合 CSS 属性来实现我的目的。
工具箱
一个 Div 加上浏览器支持的那些 CSS 属性，看起来可用的工具太少了。但是我发现问题不在于你在使用多少东西，而在于你如何看待你在使用的东西。
伪元素
因为 CSS 有伪类，所以虽然只有一个 Div，但实际上我可以使用三个元素。因此，使用
div，
div:before，
div:after，我们可以这样：
复制代码
div { background: red; }
div:before { background: yellow; }
div:after { background: blue; }
容易想到，这三个元素可以并排成为三个叠在一起的层。因此，在我的脑海中，它看起来是下面这样的：
形状
使用 CSS 和单个元素，我们可以制作三种基础图形。使用
width和
height属性制作正方形/矩形，使用
border-radius制作圆/椭圆，使用
border制作三角形/梯形。
我们还可以使用 CSS 创建其他图形，不过大部分都可以简单组合这些基础图形来实现，这些简单的图形最容易制作，也最容易修改。
多个相同的形状
