您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
暂停一下，思考三秒钟，默默记下自己的答案，看看自己想到的答案对不对。然后，我们就来一起盘点一下吧……
今天的主题，简单预估一下，完全扩展开可以写超过十万字。如此长的篇幅，相信大家看着也累，那么我就将其划分几个篇幅吧。
国产小说《吞噬星空》第一部可以分为地球篇、宇宙篇、晋之世界篇。咱们的这个主题内容可以说相当的多，扩展开来估计写一辈子都写不完。那么在这里，我们就根据形状划分，将其分为平行四边形篇、三角形与梯形篇、弧形篇、多边形篇、伪元素篇、不规则图形篇、以及动画篇，一共七个篇章。
那么，我们就开始吧！
一、提前准备
开始之前，咱们先写一个模板，用于构建每一个案例。
我们在 body 元素中放入一个 div 元素：
<div></div>
使用通配符选择器进行标签重定义：
* {
margin: 0;
padding: 0;
border: none;
}
为了显示效果，使用固定定位，将 div 元素定位到整个浏览器窗口中央：
div {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
完整代码如下：
<!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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这样，我们的整个模板就已经构建好了。
特别说明：该主题的所有的案例，包括其它篇幅的案例，代码都只会写在 css 的 div 选择器中，会在定位的代码后面做追加，所以就只展示追加的代码了。
二、四边形
还记得初中学习平面几何对四边形的分类吗？
- 四边形：由四条边组成的图形；
- 凸四边形：四个内角均小于 180° 的四边形；
- 凹四边形：有一个内角大于 180° 的四边形；
- 平行四边形：两组对边分别平行的四边形；
- 菱形：四条边均相等的四边形；
- 矩形：有一个角是直角的平行四边形，又叫做长方形，是一种特殊的平行四边形；
- 正方形：四条边都相等的矩形，是一种特殊的矩形。也有一种说法，正方形是矩形与菱形相结合的衍生图形。
- 梯形：一组对边平行，另一组对边不平行的四边形。
- 直角梯形：有一个角是直角的梯形。
- 等腰梯形：两个腰相等的梯形。
其中，平行四边形系列和梯形系列，都具有一定的几何规律性。因此，我们可以直接使用一个 div 元素将其写出来。
三、平行四边形系列
我们的 div 元素原本就是一个块级元素，默认是宽度为 100%，高度为 0 的元素。因此，我们直接从最简单的矩形开始。
矩形（长方形）
这里，只需要给 div 元素设置一个宽和高，并设置一个背景色，就可以得到一个矩形。
width: 800px;
height: 400px;
background: red;
正方形
宽和高设置成相同值，就得到正方形。
width: 400px;
height: 400px;
background: red;
平行四边形
给矩形一个斜切变形，就得到一个平行四边形。
width: 800px;
height: 400px;
background: red;
transform: skew(45deg);
菱形
猜测是同样的道理，给正方形一个斜切变形，就能得到一个菱形…………吗？
width: 400px;
height: 400px;
background: red;
transform: skew(30deg);
啊，这…………………………很明显，斜线更长了…………Why？？？？？
有一个耳熟能详的几何常识：直角三角形的斜边大于直角边。
这里，我们只是单纯的给正方形做了一个 30deg 的斜切，原本正方形中的高 AC 为 400px，斜切之后就成了直角三角形的斜边 AB，很明显，AB 是比 AC 长的。
要实现菱形，我们需要设置高度的近似值为 346.41px。附上标准的几何推理过程，感兴趣的直接看看即可：
width: 400px;
height: 346.41px;
background: red;
transform: skew(30deg);
看着还是有点别扭，旋转一下。
width: 400px;
height: 346.41px;
background: red;
transform: rotate(-30deg) skew(30deg);
嗯~ o(￣▽￣)o……………………效果还是不错的吧！！！
↓
↓
↓
至此，我们的平行四边形篇就先写到这里。
之所以把梯形和三角形放到一个篇章，是因为写梯形用到了写三角形的知识，该知识点会在下一篇章中以满满干货的方式呈现给大家！
敬请期待下一篇章——三角形与梯形篇
最后，相信聪明的您已经知道开篇问题的答案了。只要能够灵活的运用 css，只要思想足够天马星空，哪怕只用一个 div 元素，都可以写出无穷个形状。您猜到了吗？
关注“临界程序员”微信公众号，为您送上更多精彩内容！
版权归原作者 Conan9912345 所有， 如有侵权，请联系我们删除。