在使用第三方框架bootstrap的時候，本以為其是圖片實現的小箭頭，后來使用開發工具查看是用CSS來實現的，現記錄如下：
之前都沒仔細去觀注過其原理，都是拿來使用，在實現小箭頭之前需要了解下CSS的before跟after偽類的用法，這個鏈接有詳細說明http://www.webhek.com/understanding-pseudo-element-before-and-after
理解完上面偽類的用法后，下面進入主題，直接貼上代碼，
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>border test page</title> 6 <style> 7 body{background: #fff;} 8 9 .borderbottom{ 10 width:0px; 11 height: 0px; 12 border-width: 8px; 13 border-style: solid; 14 border-color: transparent transparent #333 transparent; 15 position: absolute; 16 top: 10px; 17 } 18 .borderballoon{ 19 width: 200px; 20 height: 80px; 21 background: lightgreen; 22 border-radius: 5px; 23 position: relative; 24 top: 30px; 25 } 26 .borderballoon:after{ 27 content: ""; 28 position: absolute; 29 border-style: solid; 30 border-color: lightgreen transparent transparent; 31 border-width: 10px; 32 bottom: -20px; 33 right:40px; 34 } 35 .flatballoon{ 36 width: 200px; 37 height: 100px; 38 border: 1px solid #ccc; 39 border-radius: 5px; 40 position: relative; 41 top: 60px 42 } 43 .flatballoon:after{ 44 content: ""; 45 position: absolute; 46 border-style: solid; 47 border-color: #ccc transparent transparent; 48 border-width: 10px; 49 bottom: -20px; 50 right:40px; 51 } 52 .flatballoon:before{ 53 content: ""; 54 position: absolute; 55 border-style: solid; 56 border-color: white transparent transparent; 57 border-width: 10px; 58 bottom: -19px; 59 right:40px; 60 z-index: 9; 61 } 62 63 </style> 64 </head> 65 <body> 66 67 <div class="borderbottom"></div> 68 <div class="borderballoon"></div> 69 <div class="flatballoon"></div> 70 71 </body> 72 </html>
主要是定位結合偽類實現其效果。