经过我们上一篇章里诚意满满的提供了满满干货的伪元素篇（上），相信大家已经对伪元素有了一个较深的认识。
我们简单回顾了一下正五边形的画法，也让大家明白使用伪元素画各种形状的方法了。
那么今天，我们就通过一些案例来对伪元素的控制更加熟练吧！
一、正六边形
咱们照葫芦画瓢，模仿上一篇章中的正五边形，写一个简单的正六边形吧！
很明显，直接使用一个矩形和两个等腰三角形就可以写出这个正六边形：
使用简单的计算，得到如下尺寸：
我们使用 div 元素自己构建中间的矩形，使用 ::before 伪元素构建上面的等腰三角形，再使用 ::after 伪元素构建下面的等腰三角形。
div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 346.4px; height: 200px; background: red; } div::before { position: absolute; top: -100px; right: 0; left: 0; display: block; width: 0; height: 0; margin: auto; border-right: 173.2px solid transparent; border-bottom: 100px solid red; border-left: 173.2px solid transparent; content: ''; } div::after { position: absolute; right: 0; bottom: -100px; left: 0; display: block; width: 0; height: 0; margin: auto; border-top: 100px solid red; border-right: 173.2px solid transparent; border-left: 173.2px solid transparent; content: ''; }
通过简单的正六边形案例，相信聪明的您已经发现，想要写出个性化的形状，关键是需要会拆分，把复合形状拆分成两个或三个简单的形状，就比较容易实现了！
二、爱心
基于上面说的，咱们需要思考一下，一个爱心如何可以拆分成两个或三个简单的形状？我就用一个简单的示意图直接公布答案吧！
没错，一个正方形，然后以正方形的边长为直径，画两个圆形，采用相同的背景色，控制位置，并整体旋转 45deg 即可。直接上代码：
div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 400px; height: 400px; background: red; transform: rotate(45deg); } div::before { position: absolute; top: -200px; display: block; width: 400px; height: 400px; background: red; border-radius: 50%; content: ''; } div::after { position: absolute; left: -200px; display: block; width: 400px; height: 400px; background: red; border-radius: 50%; content: ''; }
可以看到，只需要在 div 元素中设置 transform 属性的 rotate 方法进行旋转即可。
如何？效果不错吧！学会表白了吗？O(∩_∩)O
三、太极
通过写爱心的牛刀小试，对把复合形状拆分成两个或三个简单的形状之法，有写感觉了吗？那么我们继续，写一个太极图试试看吧！
怎么样？看懂如何拆分了吗？这个示意图相对难懂一些，我们就一步一步来吧！
首先，写一个矩形，矩形的宽是高的两倍，设置边框为红色，下边框的宽度和矩形的高一样，保证一半红色一半白色。
width: 400px; height: 200px; border: 5px solid red; border-bottom-width: 205px;
细心的您一定已经发现了，下边框的宽度是矩形的高度加上上边框的宽度，熟悉盒模型的您一定知道原因。
既然是太极，那么我们设置成圆形吧！
border-radius: 50%;
边框也会跟着一起变成圆形：
然后，我们写两个小圆放在里面，设置左边小圆的背景色为红色，右边小圆的背景色为白色：
div::before { position: absolute; top: 100px; display: block; width: 200px; height: 200px; background: red; border-radius: 50%; content: ''; } div::after { position: absolute; top: 100px; right: 0; display: block; width: 200px; height: 200px; background: white; border-radius: 50%; content: ''; }
开始有点点感觉了：
突然想到，我们在设置背景色的同时，还可以设置边框。那么，假如我们巧用盒模型，把小圆的宽高设置小一些，然后用边框填充到一样大小。
左边小圆，我们设置背景色为白色，边框为红色；右边小圆，我们设置背景色为红色，边框为白色。会是什么样的效果呢？
div::before { position: absolute; top: 100px; display: block; width: 70px; height: 70px; background: white; border: 65px solid red; border-radius: 50%; content: ''; } div::after { position: absolute; top: 100px; right: 0; display: block; width: 70px; height: 70px; background: red; border: 65px solid white; border-radius: 50%; content: ''; }
相信 CSS 的实力不会让大家失望：
无极生太极，太极生两仪，两仪生三才，三才生四象，四象生五行，五行生六合，六合生七星，七星生八卦，八卦生九宫，一切归十方。
人法地，地法天，天法道，道法自然。所谓一阴一阳谓之道，此乃太极！
四、心造极，蕴自成
那是一个阳光明媚的下午，蓝蓝的天空中飘着朵朵白云，微风拂过茶席，我与一位美女茶艺师邂逅于双遂月茶楼。看她一系列丝滑的功夫茶操作如此婀娜多姿，仪态端庄优雅贻笑大方，真是此景只应天上有，人间难得几回见。
出于对茶道之雅兴，我请她赐予茶道之法。她淡然一笑，送我影响我一生的六字箴言：心造极，蕴自成！
使用伪元素，结合我们之前的篇章，可以写出太多太多的图形，全部写出来估计写一本长篇小说都足够了。那这里，我就直接附上五角星、气泡框以及笑脸的源代码共大家参悟吧！
1. 五角星
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五角星</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border-right: 123.6px solid transparent; border-bottom: 380.4px solid red; border-left: 123.6px solid transparent; } div::before, div::after { position: absolute; top: 190.2px; display: block; width: 0; height: 0; border-right: 323.6px solid transparent; border-bottom: 235.1141px solid red; border-left: 323.6px solid transparent; content: ''; } div::before { left: -323.6px; transform: rotate(35deg); } div::after { right: -323.6px; transform: rotate(-35deg); } </style> </head> <body> <div></div> </body> </html>
2. 气泡框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>气泡框</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 800px; height: 400px; border: 5px solid red; border-radius: 50%; font-size: 72px; text-align: center; line-height: 400px; color: red; } div::before, div::after { position: absolute; right: 0; display: block; border: 5px solid red; border-radius: 50%; content: ''; } div::before { bottom: 25px; width: 50px; height: 50px; } div::after { bottom: -25px; width: 25px; height: 25px; } </style> </head> <body> <div>心造极，蕴自成！</div> </body> </html>
3. 笑脸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>笑脸</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 1000px; height: 800px; border: 5px solid red; border-radius: 50%; } div::before, div::after { position: absolute; display: block; border-radius: 50%; content: ''; } div::before { top: 200px; left: 200px; width: 100px; height: 100px; border-top: 10px solid red; box-shadow: 400px 0 red; } div::after { right: 0; bottom: 200px; left: 0; width: 500px; height: 200px; margin: auto; border-bottom: 15px solid red; } </style> </head> <body> <div></div> </body> </html>
↓
↓
↓
怎么样？是不是很神奇？我们仅仅只用了一个 div 元素就写出了那么多丰富多彩的图案。
心造极，蕴自成！
在此，也将这六字箴言送给大家，望大家永不言弃，不断进取，更上一层楼！
敬请期待我们的下一篇章 —— 不规则图形篇！
关注“临界程序员”，为您送上更多精彩内容！
