css实现实心三角形、有边框的三角形和空心三角形

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;}
    	

其实空心三角形就是对有边框的三角形的定位改变