(1)有邊框的三角形
我們來寫下帶邊框的三角形。
如果是一個正方形，我們寫邊時，會用到border，但我們這里討論的三角形本身就是border，不可能再給border添加border屬性，所以我們需要用到其他辦法。
最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設置成邊框所需的顏色；內層三角形絕對定位在里面。整體就能形成帶邊框三角形的假象。
這里就涉及到一個絕對定位的問題，上、下、左、右四種方向的三角形相對於父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發生什么。
HTML：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 向上的三角形 -->
<
div
class="triangle_border_up">
<
span
></
span
>
</
div
>
<!-- 向下的三角形 -->
<
div
class="triangle_border_down">
<
span
></
span
>
</
div
>
<!-- 向左的三角形 -->
<
div
class="triangle_border_left">
<
span
></
span
>
</
div
>
<!-- 向右的三角形 -->
<
div
class="triangle_border_right">
<
span
></
span
>
</
div
>
|
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
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
|
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
|
效果如圖：
為什么不是我們預想的如下圖的樣子呢
原因是，我們看到的三角形是邊，而不是真的具有內容的區域，請回憶下CSS的盒子模型的內容。
絕對定位（position:absolute），是根據相對定位父層內容的邊界計算的。
再結合上篇我們最開始寫的寬高為0的空div:
這個空的div，content的位置在中心，所以內部三角形是根據中心這個點來定位的。
為了看清楚一些，我們使用上一次的方法，給span增加一個陰影：
|
1
|
box-shadow:0 0 2px rgba(0,0,0,1);
|
效果如圖：
這回我們明確的知道了，內部的三角形都是根據外部三角形實際內容的點來定位的，而非我們肉眼看到的三角形的邊界定位。
HTML不變，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
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
|
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:-28px;
left:-29px;
|
效果如圖：
進一步來寫氣泡框的三角形，如圖所示：
HTML：
|
1
2
3
4
5
6
|
<
div
class="test_triangle_border">
<
a
href="#">三角形</
a
>
<
div
class="popup">
<
span
><
em
></
em
></
span
>純CSS寫帶邊框的三角形
</
div
>
</
div
>
|
CSS：
.test_triangle_border{
width
:
200px
;
margin
:
0
auto
20px
;
position
:
relative
;
}
.test_triangle_border a{
color
:
#333
;
font-weight
:
bold
;
text-decoration
:
none
;
}
.test_triangle_border .popup{
width
:
100px
;
background
:
#fc0
;
padding
:
10px
20px
;
color
:
#333
;
border-radius:
4px
;
position
:
absolute
;
top
:
30px
;
left
:
30px
;
border
:
1px
solid
#333
;
}
.test_triangle_border .popup span{
display
:
block
;
width
:
0
;
height
:
0
;
border-width
:
0
10px
10px
;
border-style
:
solid
;
border-color
:
transparent
transparent
#333
;
position
:
absolute
;
top
:
-10px
;
left
:
50%
;
/* 三角形居中顯示 */
margin-left
:
-10px
;
/* 三角形居中顯示 */
}
.test_triangle_border .popup em{
display
:
block
;
width
:
0
;
height
:
0
;
border-width
:
0
10px
10px
;
border-style
:
solid
;
border-color
:
transparent
transparent
#fc0
;
position
:
absolute
;
top
:
1px
;
left
:
-10px
;
}
|
(2)東北、東南、西北、西南三角形的寫法
繼續，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。
原理如圖：
根據顏色的划分，每個可以有兩種CSS來寫，分別利用不同的邊來創造所需三角形。
寫一個nw（↖）的例子：
HTML：
|
1
|
<
div
class="triangle_border_nw"></
div
>
|
CSS(1)：
|
1
2
3
4
5
6
7
8
9
|
.triangle_border_nw{
width
:
0
;
height
:
0
;
border-width
:
30px
30px
0
0
;
border-style
:
solid
;
border-color
:
#6c6
transparent
transparent
transparent
;
margin
:
40px
auto
;
position
:
relative
;
}
|
CSS(2)：
|
1
2
3
4
5
6
7
8
9
|
.triangle_border_nw{
width
:
0
;
height
:
0
;
border-width
:
0
0
30px
30px
;
border-style
:
solid
;
border-color
:
transparent
transparent
transparent
#6c6
;
margin
:
40px
auto
;
position
:
relative
;
}
|
兩種CSS效果均如圖所示：
