Notes for a front-end developer, esyou.net

0%

老生常谈系列之CSS3画三角及画圆

发表于 分类于 Valine：
本文字数： 3.1k 阅读时长 ≈ 3 分钟

这是一道前端开发中常常被问到的基础问题，该如何画一个三角形？该如何画一个圆？被问到的时候，可能在你脑海里飘过的就是“我好像在哪里看过，但是记不得了”，我们往往觉得很简单的问题，往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆，我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后，再去设置边框的弧度为宽高的一半

1
.circle{
2
    width: 50px;
3
    height: 50px;
4
    border-radius: 25px;
5
    background: blue;
6
}

2、画三角形：
思路是将某两个边框设置为透明，然后设置三角形底边的边框颜色以及高度即可

1
//向上
2
.triangle-up{
3
    width: 0;
4
    height: 0;
5
    border-left: 50px solid transparent;
6
    border-right: 50px solid transparent;
7
    border-bottom: 20px solid red;
8
}
9
//向左
10
.triangle-left{
11
    width: 0;
12
    height:0;
13
    border-bottom: 20px solid transparent;
14
    border-top: 20px solid transparent;
15
    border-right: 20px solid blueviolet;
16
}
17
//等边三角形，底边等于左右边的和
18
.triangle{
19
    width: 0;
20
    height: 0;
21
    border-left: 50px solid transparent;
22
    border-right: 50px solid transparent;
23
    border-bottom: 100px solid red;
24
}
25
//直角三角形，四边形的相邻两边的边框设为一样的宽度，一边透明，一边有颜色
26
.triangle-90{
27
    width: 0;
28
    height: 0;
29
    border-left: 50px solid transparent;
30
    border-bottom: 50px solid maroon;
31
}

3、平行四边形
只需要使用ccs中的扭曲属性skew即可实现，给他角度

1
.css_skew{
2
    width: 100px;
3
    height: 80px;
4
    background: mediumseagreen;
5
    transform: skew(20deg);
6
    margin-left: 20px;
7
}

以下是课外题，感兴趣的可以研究下：
4、五角星

1
#star-five {
2
   margin: 50px 0;
3
   position: relative;
4
   display: block;
5
   color: red;
6
   width: 0px;
7
   height: 0px;
8
   border-right:  100px solid transparent;
9
   border-bottom: 70px  solid red;
10
   border-left:   100px solid transparent;
11
   -moz-transform:    rotate(35deg);
12
   -webkit-transform: rotate(35deg);
13
   -ms-transform:     rotate(35deg);
14
   -o-transform:      rotate(35deg);
15
}
16
#star-five:before {
17
   border-bottom: 80px solid red;
18
   border-left: 30px solid transparent;
19
   border-right: 30px solid transparent;
20
   position: absolute;
21
   height: 0;
22
   width: 0;
23
   top: -45px;
24
   left: -65px;
25
   display: block;
26
   content: '';
27
   -webkit-transform: rotate(-35deg);
28
   -moz-transform:    rotate(-35deg);
29
   -ms-transform:     rotate(-35deg);
30
   -o-transform:      rotate(-35deg);
31
   
32
}
33
#star-five:after {
34
   position: absolute;
35
   display: block;
36
   color: red;
37
   top: 3px;
38
   left: -105px;
39
   width: 0px;
40
   height: 0px;
41
   border-right: 100px solid transparent;
42
   border-bottom: 70px solid red;
43
   border-left: 100px solid transparent;
44
   -webkit-transform: rotate(-70deg);
45
   -moz-transform:    rotate(-70deg);
46
   -ms-transform:     rotate(-70deg);
47
   -o-transform:      rotate(-70deg);
48
   content: '';
49
}

5、爱心

1
#heart {
2
    position: relative;
3
    width: 100px;
4
    height: 90px;
5
}
6
#heart:before,
7
#heart:after {
8
    position: absolute;
9
    content: "";
10
    left: 50px;
11
    top: 0;
12
    width: 50px;
13
    height: 80px;
14
    background: red;
15
    -moz-border-radius: 50px 50px 0 0;
16
    border-radius: 50px 50px 0 0;
17
    -webkit-transform: rotate(-45deg);
18
       -moz-transform: rotate(-45deg);
19
        -ms-transform: rotate(-45deg);
20
         -o-transform: rotate(-45deg);
21
            transform: rotate(-45deg);
22
    -webkit-transform-origin: 0 100%;
23
       -moz-transform-origin: 0 100%;
24
        -ms-transform-origin: 0 100%;
25
         -o-transform-origin: 0 100%;
26
            transform-origin: 0 100%;
27
}
28
#heart:after {
29
    left: 0;
30
    -webkit-transform: rotate(45deg);
31
       -moz-transform: rotate(45deg);
32
        -ms-transform: rotate(45deg);
33
         -o-transform: rotate(45deg);
34
            transform: rotate(45deg);
35
    -webkit-transform-origin: 100% 100%;
36
       -moz-transform-origin: 100% 100%;
37
        -ms-transform-origin: 100% 100%;
38
         -o-transform-origin: 100% 100%;
39
            transform-origin :100% 100%;
40
}