一直都在看站友們的作品，今天也來給大家分享一個小的效果，第一次發還有點小緊張呢，語言表達能力不是很好，還請見諒…^
先來個簡單點的吧，上效果圖
剛開始在網上看到效果圖的時候感覺好神奇，當我試着寫出來的時候發現，哇！原來這么簡單，我這腦袋瓜咋沒反應過來呢，所以整理了下順便簡化了分享出來，希望對大家有幫助。
<div class="demo"></div>
<style>
.demo{
width:0;
height:0px;
border:100px solid transparent;
border-color:#f00 #ff0 #05f #0f0;
}
</style>
OK了，直接設置一個邊框的大小，然后顏色順序：上、右、下、左；是不是感覺很神奇呢。
來接着第二個，這是由3個標簽組成的，還是先上效果圖：
源代碼先貼這兒：
<div class="demo">
<div class="out"></div>
<div class="in"></div>
</div>
先用一個大的div設置邊框樣式、相對定位，樣式如下：
.demo{
width:200px;
height:200px;
border:2px solid #f30;
position:relative;
}
接下來是上面的小箭頭，如果是實心的就用一個標簽就可以了，這里是空心的所以我就用了兩個標簽
先把箭頭一樣的樣式寫一起
.out,.in{
position:absolute;
width:0;
height:0px;
}
接下來是箭頭的邊框了，就是這里的out標簽
.out{
border:20px solid transparent;
border-bottom-color:#f30; /*這里的顏色一定要跟上面demo邊框顏色一樣*/
top:-40px;
left:20%;
}
如果是實心的箭頭到這一步就可以了哦·還是來張效果圖吧
接下來繼續把箭頭變成空心的，原理跟上面實心的一樣，只需要把它的大小變小一點，位置移一下，顏色跟demo背景顏色一樣就ok了；
.in{
border:18px solid transparent;
border-bottom-color:#fff;/*這里的顏色一定要跟demo背景顏色一樣*/
top:-35px;
left:21%;
}
這樣一個帶箭頭邊框的樣式就完成了，是不是很簡單呢，歡迎補充，歡迎指教！
http://www.zcool.com.cn/article/ZMTU2NTky.html