纯 CSS 实现的三角形

发表于 | 分类于 ，

今天送上一碟凉拌小菜 – 适用于 IE6+，Firefox，Chrome 的纯 CSS 三角形： 效果如下：

triangle.less 文件：

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
.arrow-up(@bottom, @height, @color) {
/**
* @bottom triangle bottom length
* @height triangle height
* @color triangle color
*/
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 @bottom/2 @height;
border-color: transparent transparent @color;
line-height: 0px;
_border-color: #000000 #000000 @color;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.arrow-down(@bottom, @height, @color) {
width: 0px;
height: 0px;
border-style: solid;
border-width: @height @bottom/2 0;
border-color: @color transparent transparent;
line-height: 0px;
_border-color: @color #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.arrow-right(@bottom, @height, @color) {
width: 0px;
height: 0px;
border-style: solid;
border-width: @bottom/2 0 @bottom/2 @height;
border-color: transparent transparent transparent @color;
line-height: 0px;
_border-color: #000000 #000000 #000000 @color;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.arrow-left(@bottom, @height, @color) {
width: 0px;
height: 0px;
border-style: solid;
border-width: @bottom/2 @height @bottom/2 0;
border-color: transparent @color transparent transparent;
line-height: 0px;
_border-color: #000000 @color #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

@triangleColor:blue;
.arrow-up {
.arrow-up(100px, 50px, @triangleColor);
}
.arrow-down {
.arrow-down(100px, 50px, @triangleColor);
}
.arrow-right {
.arrow-right(100px, 50px, @triangleColor);
}
.arrow-left {
.arrow-left(100px, 50px, @triangleColor);
}

编译后的 triangle.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
.arrow-up {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent #0000ff;
line-height: 0px;
_border-color: #000000 #000000 #0000ff;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.arrow-down {
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 50px 0;
border-color: #0000ff transparent transparent;
line-height: 0px;
_border-color: #0000ff #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 50px 50px;
border-color: transparent transparent transparent #0000ff;
line-height: 0px;
_border-color: #000000 #000000 #000000 #0000ff;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.arrow-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 50px 50px 0;
border-color: transparent #0000ff transparent transparent;
line-height: 0px;
_border-color: #000000 #0000ff #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

测试HTML：

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="triangle.css">
<style type="text/css">
</style>
</head>
<body>
<div style="float:left;width:200px;">
<div class="arrow-up"></div><br />
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div><br />
</div>

<div style="float:left;width:200px;">
<div style="position:relative;">
<div class="arrow-up" style="border-bottom-color:#f00;"></div>
<div class="arrow-up" style="border-bottom-color:#fff;position:absolute;top:2px;"></div>
</div><br />

<div style="position:relative;">
<div class="arrow-down" style="border-top-color:#f00;"></div>
<div class="arrow-down" style="border-top-color:#fff;position:absolute;top:-2px;"></div>
</div>
<div style="position:relative;">
<div class="arrow-right" style="border-left-color:#f00;"></div>
<div class="arrow-right" style="border-left-color:#fff;position:absolute;top:0;left:-2px;"></div>
</div>
<div style="position:relative;">
<div class="arrow-left" style="border-right-color:#f00;"></div>
<div class="arrow-left" style="border-right-color:#fff;position:absolute;top:0;left:2px;"></div>
</div>

</div>

</body>
</html>
相关文章