纯css画三角形

发表于 | 分类于 | 阅读次数:

2018-08-09下午，心情烦躁。。写点css。。

画三角形主要用到了border属性，以及border属性的transparent的值，表示透明。

image.png

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现三角形</title>
</head>
<style>
    body{
        display: flex;
        flex-wrap: wrap;
    }
    .div-area{
        width: 25%;
        height: 200px;
    }
    .triangle-up{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid blue;
    }
    .triangle-down{
        width: 0;
        height: 0;
        border-top: 50px solid blue;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
    .triangle-left{
        width: 0;
        height: 0;
        border-right: 50px solid blue;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }
    .triangle-right{
        width: 0;
        height: 0;
        border-left: 50px solid blue;
        border-bottom:  50px solid transparent;
        border-top: 50px solid transparent;;
    }
    .triangle-topleft{
        width: 0;
        height: 0;
        border-top: 100px solid blue;
        border-right: 100px solid transparent;
    }
    .triangle-topright{
        width: 0;
        height: 0;
        border-top: 100px solid blue;
        border-left: 100px solid transparent;
    }
    .triangle-bottomleft{
        width: 0;
        height: 0;
        border-bottom: 100px solid blue;
        border-right: 100px solid transparent;
    }
    .triangle-bottomright{
        width: 0;
        height: 0;
        border-bottom: 100px solid blue;
        border-left: 100px solid transparent;
    }
</style>
<body>
<!--上三角-->
<div class="div-area">
    <p>上三角</p>
    <div class="triangle-up"></div>
</div>
<!--下三角-->
<div class="div-area">
    <p>下三角</p>
    <div class="triangle-down"></div>
</div>

<!--左三角-->
<div class="div-area">
    <p>左三角</p>
    <div class="triangle-left"></div>
</div>
<!--右三角-->
<div class="div-area">
    <p>右三角</p>
    <div class="triangle-right"></div>
</div>
<!--左上三角-->
<div class="div-area">
    <p>左上三角</p>
    <div class="triangle-topleft"></div>
</div>
<!--右上三角-->
<div class="div-area">
    <p>右上三角</p>
    <div class="triangle-topright"></div>
</div>
<!--左下三角-->
<div class="div-area">
    <p>左下三角</p>
    <div class="triangle-bottomleft"></div>
</div>
<!--右下三角-->
<div class="div-area">
    <p>右下三角</p>
    <div class="triangle-bottomright"></div>
</div>
</body>
</html>