只用一个 HTML 元素可以写出多少形状?——平行四边形篇

192 阅读4分钟

您有没有想过一个问题,如果我们只用一个 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>

这样,我们的整个模板就已经构建好了。

特别说明:该主题所有的案例,包括其它篇幅的案例,代码都只会写在 cssdiv 选择器中,会在定位的代码后面做追加,所以就只展示追加代码了。


二、四边形

还记得初中学习平面几何四边形的分类吗?

四边形.jpg

  • 四边形:由四条边组成的图形;
  • 凸四边形:四个内角均小于 180°四边形
  • 凹四边形:有一个内角大于 180°四边形
  • 平行四边形:两组对边分别平行四边形
  • 菱形四条边相等四边形
  • 矩形:有一个直角平行四边形,又叫做长方形,是一种特殊平行四边形
  • 正方形四条边都相等的矩形,是一种特殊矩形。也有一种说法,正方形矩形菱形相结合的衍生图形
  • 梯形一组对边平行另一组对边不平行四边形
  • 直角梯形:有一个直角的**梯形*。
  • 等腰梯形两个腰相等梯形

其中,平行四边形系列梯形系列,都具有一定的几何规律性。因此,我们可以直接使用一个 div 元素将其写出来。


三、平行四边形系列

我们的 div 元素原本就是一个块级元素默认宽度100%高度0 的元素。因此,我们直接从最简单的矩形开始。

矩形(长方形)

这里,只需要给 div 元素设置一个,并设置一个背景色,就可以得到一个矩形

width: 800px;
height: 400px;
background: red;

长方形.png

正方形

设置成相同值,就得到正方形

width: 400px;
height: 400px;
background: red;

正方形.png

平行四边形

矩形一个斜切变形,就得到一个平行四边形

width: 800px;
height: 400px;
background: red;
transform: skew(45deg);

平行四边形.png

菱形

猜测是同样的道理,给正方形一个斜切变形,就能得到一个菱形…………吗?

width: 400px;
height: 400px;
background: red;
transform: skew(30deg);

错误菱形.png

啊,这…………………………很明显,斜线更长了…………Why?????

菱形.jpg

有一个耳熟能详的几何常识:直角三角形斜边大于直角边

这里,我们只是单纯的给正方形做了一个 30deg斜切,原本正方形中的高 AC400px斜切之后就成了直角三角形斜边 AB,很明显,AB 是比 AC 长的。

要实现菱形,我们需要设置高度近似值346.41px。附上标准的几何推理过程,感兴趣的直接看看即可:

菱形证明题.png

width: 400px;
height: 346.41px;
background: red;
transform: skew(30deg);

正确菱形.png

看着还是有点别扭,旋转一下。

width: 400px;
height: 346.41px;
background: red;
transform: rotate(-30deg) skew(30deg);

菱形.png

嗯~ o( ̄▽ ̄)o……………………效果还是不错的吧!!!

至此,我们的平行四边形篇就先写到这里。

之所以把梯形三角形放到一个篇章,是因为写梯形用到了写三角形的知识,该知识点会在下一篇章中以满满干货的方式呈现给大家!

敬请期待下一篇章 —— 三角形与梯形篇

最后,相信聪明的您已经知道开篇问题的答案了。只要能够灵活的运用 css,只要思想足够天马星空,哪怕只用一个 div 元素,都可以写出无穷个形状。您猜到了吗?