您有没有想过一个问题,如果我们只用一个 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 元素,都可以写出无穷个形状。您猜到了吗?