绘制正多边形 | 学习总结

1. 绘制原理

正多边形的绘制原理很简单，就是通过调整边框border的宽高来实现，具体可以通过调节下面示例面板的各项参数来观察物体的形状变化。动手尝试一下，通过调节各个参数：

如何得到一个三角形？
如何得到一个梯形？
如何得到一个“倒三角”
……

示例面板中默认边框及宽高为50px；后面正N边形的绘制边长均为100px，注意换算。

width: 50px

height: 50px

border-top:50px

border-right:50px

border-bottom:50px

border-left:50px

2. 正三角形

正三角形边长100px（后面图形边长统一为100px），夹角60度，高度约为87px。

.box {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 87px;
    border-color: transparent transparent #0f0;
}

1
2
3
4
5
6
7

3. 正四边方形

正四边形，设置宽高即可。也可通过border的方式来实现。

.box {
    width: 100px;
    height: 0;
    border-style: solid;
    border-width: 100px 0 0;
    border: #f00 transparent transparent;
}

// 或者
.box {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px;
    border: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 正五变形

正五边形可以由三角形和梯形拼接而成。这里三角形使用div，梯形使用伪元素来实现。正五边形夹角为(5-2) * 180 / 5 = 108度，边长为100px，计算可得相关边长度。另外，伪元素使用绝对定位，元素的中心点(0,0)位于三角形的定点位置，所以伪元素需要往下移动59px、往左移动81px，图示如下：

.five {
    position: relative;
    width: 0;
    height: 0;
    border-width: 0 81px 59px;
    border-style: solid;
    border-color: transparent transparent #069;
}
.five::before {
    position: absolute;
    content: "";
    top: 59px;
    left: -81px;
    width: 100px;
    height: 0;
    border-width: 95px 31px 0;
    border-style: solid;
    border-color: #069 transparent transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 正六边形

正六边形可由两个梯形拼接而成。夹角(6-2) * 180 / 6 = 120度，边长100px，计算可得相关边长度。下面使用一个div实现三角形，使用一个伪元素来实现梯形。图示如下：

.six {
    position: relative;
    width: 100px;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 0 50px 87px;
    border-color: transparent transparent #069;
}
.six::after {
    position: absolute;
    left: -50px;
    top: 87px;
    content: "";
    width: 100px;
    height: 0;
    border-style: solid;
    border-width: 87px 50px 0;
    border-color: #069 transparent transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6. 正七边形

正七边形可有一个三角形和两个梯形拼接而成。夹角(7-2) * 180 / 7 = 128.57度，边长100px，计算可得相关边长长度。下面使用一个div实现三角形，两个伪元素分别实现两个梯形。图示如下：

.seven {
    position: absolute;
    top: 30px;
    left: 300px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 90px 43px;
    border-color: transparent transparent #809;
}
.seven::before {
    position: absolute;
    left: -112px;
    top: 43px;
    content: "";
    width: 180px;
    height: 0;
    border-style: solid;
    border-width: 0 22px 97px;
    border-color: transparent transparent #809;
}
.seven::after {
    position: absolute;
    left: -112px;
    top: 140px;
    content: "";
    width: 100px;
    height: 0;
    border-style: solid;
    border-width: 78px 62px 0;
    border-color: #809 transparent transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

7. 正八边形

正八边形可由两个梯形和一个矩形拼接而成。正八边形夹角135度，边长100px。计算可得相关边长长度，下面也是通过一个div和两个伪元素实现，图示如下：

.eight {
    position: absolute;
    left: 300px;
    top: 300px;
    width: 100px;
    height: 0;
    border-style: solid;
    border-width: 0 71px 71px;
    border-color: transparent transparent #098;
}
.eight::before {
    content: "";
    position: absolute;
    left: -71px;
    top: 71px; 
    width: 242px;
    height: 100px;
    background-color: #098;
}
.eight::after {
    content: "";
    position: absolute;
    left: -71px;
    top: 171px; 
    width: 100px;
    height: 0;
    border-style: solid;
    border-width: 71px 71px 0;
    border-color: #098 transparent transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 1. 绘制原理

# 2. 正三角形

# 3. 正四边方形

# 4. 正五变形

# 5. 正六边形

# 6. 正七边形