想要實現的效果如下:
第一步：如何用css畫出三角形？
1 /* css畫三角形 */ 2 .sanjiao{ 3 width:0; 4 border-top:40px solid red; 5 border-bottom:40px solid green; 6 border-left:40px solid blue; 7 border-right:40px solid yellow; 8 } 9 10 <div class="sanjiao"> 11 </div>
如下顯示
要顯示一個三角形，那么去掉其他三個三角形即可。
如果刪掉其他三條邊，那剩下的一條邊也不會顯示，最好是讓其他三條邊顯示透明。
/* css畫三角形 */ .sanjiao{ width:0; border-width:40px; border-style:solid; border-color:red transparent transparent transparent; /* transparent 設置邊框顏色透明 */ } <div class="sanjiao"> </div>
如下顯示
第二步：如何讓三角形緊貼在元素上？
可以定義一個標簽，如上畫出三角形；也可以用before和after偽元素畫出三角形。
利用position定位使得三角形緊貼在元素上的指定位置。
完整代碼如下:
<!DOCTYPE html> <html> <head> <title></title> <style> .wrap{ margin-top:30px; text-align:center; } .jiantou{ display:inline-block; padding:10px; background:#2E963D; color:#FFF; border-radius:8px; position:relative; } /* 下箭頭 */ .jiantou:after{ display:block; content:''; border-width:8px 8px 8px 8px; border-style:solid; border-color:#ff4d4d transparent transparent transparent; /* 定位 */ position:absolute; left:40%; top:100%; } /* 上箭頭 */ .jiantou:before{ display:block; content:''; border-width:8px 8px 8px 8px; border-style:solid; border-color:transparent transparent #ff4d4d transparent; /* 定位 */ position:absolute; left:40%; top:-16px; } </style> </head> <body> <div class="wrap"> <span class="jiantou">LIUCHUAN</span> </div> </body> </html>
如第一幅圖片
小結：QQ上的聊天窗口中說完話之后，就會有個文字泡，這個文字泡有這個箭頭指向頭像。如下：
用這種方法可以實現如上文字泡效果。