標籤：style blog http color io os for sp div
現在讓我們開始製作箭頭吧！
在開始前，你要知道如何用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>
：
這個例子，我們可以更好的理解邊框了。
用CSS虛擬元素製作箭頭
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
