現在讓我們開始制作箭頭吧！
在開始前，你要知道如何用CSS去畫一個三角形，如果還不清楚可以看看這里純CSS畫各種圖形
我們用到兩個CSS偽元素，before和after，它們屬於行內元素，但可以用display來改變，before和after是在CSS2的新特性（現在已經老了），瀏覽器對其兼容性還未了解。
實現代碼如下：
1 <!--CSS樣式，在項目中可以把相同的屬性與屬性值對寫在一起，這里是方便學習-->
2 <style>
3 .divtest{
4 position: absolute;
5 left: 100px;
6 height: 40px;
7 width: 200px;
8 padding-left: 30px;
9 background: red;
10 line-height: 40px;
11 }
12 .divtest:before{
13 content: '';
14 position: absolute;
15 top: 0;
16 left: -20px;
17 height: 0;
18 width: 0;
19 border-top: 20px solid rgb(255, 0, 0);
20 border-left: 20px solid #FFFFFF;
21 /* border-right: 20px solid #AF9E9E; */
22 border-bottom: 20px solid #FF0000;
23 background: red;
24 }
25 .divtest:after{
26 content: '';
27 position: absolute;
28 top: 0;
29 right: -20px;
30 height: 0;
31 width: 0;
32 border-top: 20px solid rgb(255, 255, 255);
33 border-left: 20px solid #FF0000;
34 /* border-right: 20px solid #AF9E9E; */
35 border-bottom: 20px solid #FFFFFF;
36 background: red;
37 }
38 </style>
39 <body>
40 <div class="divtest">
41 這是一個箭頭 42 </div>
效果圖：
這是一個箭頭
這里用CSS偽元素實現了前后兩個小三角形，一個白色一個紅色，分別添加到div塊元素的前后，就變成了箭頭。當然稍作修改也可以實現下面的箭頭
這是一個箭頭
除了這些，你還可以為這些箭頭添加樣式，如漸變、投影、邊距、旋轉等
下面是邊框的代碼，觀察一下邊緣處的分配原則：
1 <style>
2 .divtest1{
3 width:0;
4 height:0;
5 border-top: 40px solid blue;
6 border-left: 40px solid red;
7 border-right:40px solid yellow;
8 border-bottom: 40px solid green;
9 }
10 </style>
11 <div class="divtest1"> </div>
效果圖：
這個例子，我們可以更好的理解邊框了。