css三角形

css代码

.triangle-right{
	height:0;
	width:0;
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 30px solid #000;
}
.triangle-left{
	height:0;
	width:0;
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-right: 30px solid #000;
}
.triangle-bottom{
	height:0;
	width:0;
	border-right: 40px solid transparent;
	border-left: 40px solid transparent;
	border-top: 30px solid #000;
}
.triangle-top{
	height:0;
	width:0;
	border-right: 40px solid transparent;
	border-left: 40px solid transparent;
	border-bottom: 30px solid #000;
}

html代码

<div class="triangle-right"></div><!--左-->
<div class="triangle-left"></div><!--右-->
<div class="triangle-top"></div><!--下-->
<div class="triangle-bottom"></div><!--上-->