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

Conan9912345 2024-10-02 12:33:01 阅读 74

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

暂停一下，思考三秒钟，默默记下自己的答案，看看自己想到的答案对不对。然后，我们就来一起盘点一下吧……

今天的主题，简单预估一下，完全扩展开可以写超过十万字。如此长的篇幅，相信大家看着也累，那么我就将其划分几个篇幅吧。

国产小说《吞噬星空》第一部可以分为地球篇、宇宙篇、晋之世界篇。咱们的这个主题内容可以说相当的多，扩展开来估计写一辈子都写不完。那么在这里，我们就根据形状划分，将其分为平行四边形篇、三角形与梯形篇、弧形篇、多边形篇、伪元素篇、不规则图形篇、以及动画篇，一共七个篇章。

那么，我们就开始吧！

一、提前准备

开始之前，咱们先写一个模板，用于构建每一个案例。

我们在 body 元素中放入一个 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">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>长方形</title>

<style type="text/css">code>

* {

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 元素设置一个宽和高，并设置一个背景色，就可以得到一个矩形。
 <code>width: 800px;
height: 400px;
background: red; 
 
正方形
 宽和高设置成相同值，就得到正方形。