首先，來寫一個簡單的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .arrow { width:0; height:0; font-size:0; border:solid 10px; border-color:#f00 #0f0 #00f #000; } </style> </head> <body> <div class="arrow"></div> </body> </html>
我們發現，原來當div的寬度和高度都是0的時候，它的整個邊框是由四個三角形組成的，每一邊為一個三角形，那么我們就可以利用這個特點，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設置為與背景相同即可，這樣就只能看到你想要的那個三角形了，然后再利用定位調整一下位置就可以了。具體代碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background:#4D4948; } .send { position:relative; /*父類用相對位置*/ width:150px; height:35px; background:#F8C301; border-radius:5px; /* 圓角 */ margin:30px auto 0; } .send .arrow { position:absolute; /*子類用絕對位置*/ top:5px; /*向下移動五個像素*/ right:-16px; /*調試三角的位置*/ width:0; height:0; font-size:0; border:solid 8px; border-color:#4D4948 #4D4948 #4D4948 #F8C301;} </style> </head> <body> <div class="send"> <div class="arrow"></div> </div> </body> </html>