只用一个 HTML 元素可以写出多少形状？——伪元素篇（下）

经过我们上一篇章里诚意满满的提供了满满干货的 伪元素篇（上），相信大家已经对 伪元素 有了一个较深的认识。

我们简单回顾了一下 正五边形 的画法，也让大家明白使用 伪元素 画各种形状的方法了。

那么今天，我们就通过一些案例来对 伪元素 的控制更加熟练吧！

---

一、正六边形

咱们照葫芦画瓢，模仿上一篇章中的 正五边形 ，写一个简单的 正六边形 吧！

很明显，直接使用 一个矩形 和两个等腰三角形 就可以写出这个 正六边形：

使用简单的计算，得到如下尺寸：

我们使用 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. 五角星

2. 气泡框

  
心造极，蕴自成！

3. 笑脸

↓

↓

↓

怎么样？是不是很神奇？我们仅仅 只用了一个 div 元素 就写出了那么多丰富多彩的图案。

心造极，蕴自成！

在此，也将这六字箴言送给大家，望大家永不言弃，不断进取，更上一层楼！

敬请期待我们的下一篇章 —— 不规则图形篇！

关注“临界程序员”，为您送上更多精彩内容！