使用CSS画三角形和其他多边形

以前经常使用CSS来画三角形,现在来总结一下,顺便尝试一下复杂的多边形

为什么使用border就可以画出三角形

当你给每一条边设置单独的颜色,你就会发现,其实每一边其实都是一个梯形

1
2
3
4
5
6
7
8
.triangle {
border-top:20px solid #eee;
border-left:20px solid #aaa;
border-right:20px solid #bbb;
border-bottom:20px solid rgba(28, 91, 129, 0.7);
width: 60px;
height: 60px;
}

而如果你把高度和宽度设置为0,则高和宽都是边框的宽度

1
2
3
4
5
6
7
8
.triangle {
border-top:50px solid #eee;
border-left:50px solid #aaa;
border-right:50px solid #bbb;
border-bottom:50px solid rgba(28, 91, 129, 0.7);
width: 0;
height: 0;
}

而当你把多余边的颜色设置为透明,即transparent,就成了三角形

画各种各样的三角形

可能你就要问了,那我要一个等边三角形怎么办,通过严格的数学计算,一个边长为100px的正三角形

1
2
3
4
5
6
7
.triangle {
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:86.6px solid rgba(28, 91, 129, 0.7);
height: 0;
width: 0;
}

那又要问了,其他角度的三角形呢,我只能说考验你数学功底的时候到了,不想算的就用这个网站吧,自动生成任意边长的三角形,至于角度还是要靠你自己算

需要将三角形旋转角度,可以使用transform: rotate(90deg)来旋转90°,注意兼容性

画其他多边形

理解了上边的原理后,我们就可以来画各种各种的多边形了

五角星

这难度就有点大了,首先,我们要把五角星分为以下三个相同的等腰三角形,会点儿数学就知道三角形的底角为36°,不过麻烦的地方在于36°的三角形怎么画,当然,我也只能粗略的画画,border-leftborder-right为80px,border-bottom为60px,别问我是怎么知道的,算不来36°就当作37°算吧

我采取的是使用before和after两个伪元素,这样也不会增加无关的的dom元素。然后自行调整旋转角度和位置。绝对定位和相对定位,伪元素的使用自行了解。

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
33
34
35
36
37
38
39
40
41
42
43
44
45
#star-five {
margin: 100px;
position: relative;
width: 0px;
height: 0px;
border-right: 80px solid transparent;
border-bottom: 60px solid #ff6f6f;
border-left: 80px solid transparent;
-moz-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
}

#star-five:before {
border-bottom: 60px solid rgb(32, 175, 179);
border-left: 80px solid transparent;
border-right: 80px solid transparent;
position: absolute;
height: 0;
width: 0;
top: 0px;
left: -73.5px;
content: '';
-webkit-transform: rotate(71deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
}

#star-five:after {
position: absolute;
top: 0px;
left: -80px;
width: 0px;
height: 0px;
border-right: 80px solid transparent;
border-bottom: 60px solid rgb(241, 187, 140);
border-left: 80px solid transparent;
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
content: '';
}

心形

同理,两个图形组合而来,处理好兼容性

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#heart {
position: relative;
}

#heart:before{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: rgb(245, 76, 76);
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

#heart:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 50px;
height: 80px;
background: rgb(255, 219, 61);
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

太极图

分为下面三个部分,一个大圆加上两个小圆,小圆还有一个圆心;
大圆两半边的颜色不一样,需要用边框来实现,假设半径是50px,那么我们设置高度为50px,下边框的宽度为50px,这样两半边的颜色就可以不一样了
而小圆也是用的伪元素,只要宽度加两个边框为50px就行,他们绝对定位的位置很特殊,只需要top和left设置为50%即可

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
33
34
35
#taichi {
margin: 50px;
width: 100px;
height: 50px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 0px 0px 50px 0px;
border-radius: 100%;
position: relative;
}

#taichi:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 14px;
height: 14px;
}

#taichi:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 14px;
height: 14px;
}
文章作者: ourongxing
文章链接: https://orxing.top/post/61346fce.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 OURONGXING

评论