灵活使用css画图，熟练使用代码

css三角形的画法

三角形画法

左上角直角三角形

查看代码

1
2
3
4
5
6
7
.box-up{
    height: 0px;
    width: 0px;
    border-top:50px solid #517983;
    border-right: 50px solid transparent;
    margin: 10px auto;
}
  1. 扩展 - 改变top/right的值，使三角形的边发生改变
  2. 右上角，左下角，右下角同理

使用css三角形画平行四边形

查看代码

  • 有多种画法，巧妙使用浮动，定位
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .box-p{
        width: 200px;
        height: 100px;
        margin: 50px auto;
        background-color: #888;  
        position:relative;  
    }
    .box-p i{
        position: absolute;
        width: 0;
        height: 0;
        left: -50px;
        border-bottom: 100px solid #888;
        border-left: 50px solid transparent;   
    }
    .box-p span{
        position: absolute;
        width: 0;
        height: 0;
        right: 0;
        border-bottom: 100px solid #fff;
        border-left: 50px solid #888;  
    }
  • 第二种简单的画法
1
2
3
4
5
6
7
width: 150px;
height: 100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);     
-o-transform: skew(20deg);
background: red;

使用三角形画六边形有多种画法

  1. 第一种我使用了定位的画法，思路两个三角形

查看代码

  1. 画法，由上下俩个三角形组成
    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
    .star-six2 {
        width: 300px;
        height: 300px;
        margin: 10px auto;
        position: relative;
    }

    .star-six2 p {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 80px solid red;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    .star-six2 span {
        position: absolute;
        width: 0;
        height: 0;
        border-bottom: 80px solid red;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        top: -25px;
    }
  2. 第二种使用伪元素法构造
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
    margin: 50px auto;
}

.star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

使用css画八卦图

查看代码

  1. 思路：正方形+两个长方形+两个正方形组成
  2. 思路二：一个大的正方形（或者两个长方形）+两个正方形（使用border-radius增大他们的外边距
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
48
49
50
51
52
53
54
55
56
57
.bagua {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 50px auto;
    background-color: #000000;
    border-radius: 100px;
    border: 1px solid #000;
}

.bagua p {
    position: absolute;
    height: 100px;
    width: 200px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
}

.bagua .a {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 50px;
    background-color: #000;
    border-radius: 50px 50px 0 0;
}

.bagua .b {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 50px;
    background-color: #fff;
    border-radius: 0 0 50px 50px;
    right: 0;
    top: 100px
}

.bagua .c {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 90px;
    left: 40px;
    background-color: #fff;
    border-radius: 10px;
}

.bagua .d {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 40px;
    top: 90px;
    background-color: #000;
    border-radius: 10px;
}
  1. 使用伪元素画法
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
.bagua2 {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

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

.bagua2:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

查看效果