很長時間沒有動筆了，最近學的東西很雜很亂！又有點丟了西瓜撿芝麻，走馬觀花，瞻前顧后的感覺！
因此，我決定一步步來，化繁為簡，今天就從border入手。
很多時候我們都會需要一個三角形或者三角小箭頭。我們可以用border來做。當然還有其他很多中方法，比如直接圖片，canvas等。
直接上代碼吧！
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}body{padding:100px;}.a0,.a1{display:inline-block;width:0;height:0;border-width:20px;border-style:solid;border-color:red blue black wheat;}.a0{width:40px;height:40px;}p{text-align:center;margin:20px;}.a2,.a2-2{display:inline-block;width:0;height:0;border-width:0 50px 50px 0;border-style:dashed solid solid dashed;border-color:red blue transparent wheat;}.a2-2{margin-left:100px;border-width:50px 50px 0px 50px;border-style:dashed solid solid dashed;border-color:red blue transparent wheat;}.a3,.a3-1{display:inline-block;width:0;height:0;border-width:50px;border-style:dashed dashed solid;border-color:transparent transparent rgb(252,146,176) !important; /*rgba(252,146,176,.2)*/-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.a3-1{display:inline-block;width:0;height:0;margin-left:100px;border-width:50px;border-style:dashed dashed solid;border-color:rgba(252,146,176,.2) rgba(252,146,176,.2) rgb(252,146,176) !important; /*rgba(252,146,176,.2)*/-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.a3 i,.a3-1 i{display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-style:normal;margin-top:18px;margin-left:-5px;font-size:28px;color:white;}</style>
</head>
<body><span class="a0"></span><span class="a1"></span><p><span class="a2"></span><span class="a2-2"></span></p><p style="padding:20px;"><span class="a3"><i>X</i></span><span class="a3-1"><i>X</i></span></p>
</body>
</html>
?
:來用shape繪出想要的圖形吧!)
