1、实心三角形
<div class="up"></div> <!--向上的三角形-->
<div class="down"></div> <!--向下的三角形-->
<div class="left"></div> <!--向左的三角形-->
<div class="right"></div> <!--向右的三角形-->
/*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/
.up{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #f00;font-size: 0;line-height: 0;}
.down{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #f00;font-size: 0;line-height: 0;}
.left{width: 0;height: 0;border-top: 20px solid transparent;border-right: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}
.right{width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}
2、有边框的三角形
<!--向上的三角形-->
<div class="border-up">
<span></span>
</div>
<!--向下的三角形-->
<div class="border-down">
<span></span>
</div>
<!--向左的三角形-->
<div class="border-left">
<span></span>
</div>
<!--向右的三角形-->
<div class="border-right">
<span></span>
</div>
.border-up{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;}
.border-up span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 1px;}
.border-down{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;}
.border-down span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -29px;}
.border-left{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-left span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 1px;top: -28px;}
.border-right{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-right span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -29px;top: -28px;}
3、空心三角形
<!--空心的三角形-->
<!--向上的三角形-->
<div class="border-up-empty">
<span></span>
</div>
<!--向下的三角形-->
<div class="border-down-empty">
<span></span>
</div>
<!--向左的三角形-->
<div class="border-left-empty">
<span></span>
</div>
<!--向右的三角形-->
<div class="border-right-empty">
<span></span>
</div>
.border-up-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;}
.border-up-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 2px;}
.border-down-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;}
.border-down-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -30px;}
.border-left-empty{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-left-empty span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 2px;top: -28px;}
.border-right-empty{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;}
.border-right-empty span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -30px;top: -28px;}
其实空心三角形就是对有边框的三角形的定位改变