PJCHENder 未整理筆記

[Snippet-CSS] 三角形 Triangle

2017-10-06

[Snippet-CSS] 三角形 Triangle

@(CSS)[snippet, css]

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

.triangle-left {
width: 0px;
height: 0px;
border-right: 60px solid $npm; // 高
border-top: 30px solid transparent; // 底
border-bottom: 30px solid transparent; // 底
}


.triangle-top {
width: 0px;
height: 0px;
border-right: 30px solid transparent; // 底
border-left: 30px solid transparent; // 底
border-bottom: 60px solid $green; // 高
}


.triangle-bottom {
width: 0px;
height: 0px;
border-right: 30px solid transparent; // 底
border-left: 30px solid transparent; // 底
border-top: 60px solid $heroku; // 高
}

.triangle-lefttop {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid $npm;
}

.triangle-righttop {
width: 0px;
height: 0px;
border-left: 60px solid transparent;
border-top: 60px solid $green;
}


.triangle-leftbottom {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-bottom: 60px solid $npm;
}


.triangle-rightbottom {
width: 0px;
height: 0px;
border-left: 60px solid transparent;
border-bottom: 60px solid $green;
}

程式範例

See the Pen [CSS] Triangle by PJCHEN (@PJCHENder) on CodePen.

Tags: snippet

掃描二維條碼,分享此文章