首先，来写一个简单的代码：
<!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>