tip：设置三角形非常简单。
只需把标签的宽和高设为0；
把border给个宽度和透明（transparent）：border: 20px transparent solid;
给其中一边设置颜色： border-top-color: #000;
即可完成一个三角形。
代码html：
<div class="san1"></div>
css代码：
.san1{
/*箭头向下*/
0px;
height:0px;
border: 20px transparent solid;/*transparent透明*/
border-top-color: #000;
}
效果图：
其他三角形代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置三角形</title> <style> .san1{ /*箭头向下*/ width:0px; height:0px; border: 20px transparent solid;/*transparent透明*/ border-top-color: #000; } .san2{ /*箭头向上*/ width:0px; height:0px; border: 20px transparent solid;/*transparent透明*/ border-bottom-color: #000; } .san3{ /*箭头向左*/ width:0px; height:0px; border: 20px transparent solid;/*transparent透明*/ border-right-color: #000; } .san4{ /*箭头向右*/ width:0px; height:0px; border: 20px transparent solid;/*transparent透明*/ border-left-color: #000; } </style> </head> <body> 1.箭头向下 <div class="san1"></div> 2.箭头向上 <div class="san2"></div> 3.箭头向左 <div class="san3"></div> 4.箭头向右 <div class="san4"> </div> </body> </html>
效果图：
