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

Conan9912345

于 2024-08-01 15:14:57 发布

阅读量516

点赞数 12

分类专栏： HTML + CSS 文章标签：前端 html css 图形渲染 css3 html5

本文链接：https://blog.csdn.net/Conan9912345/article/details/140846435

版权

HTML + CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
只用一个 HTML 元素可以写出多少形状？——平行四边形篇

您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
复制链接

扫一扫

专栏目录