css实现各种三角形

话不多说，直接开干。
怎么用css实现三角形？首先我们了解div盒子的boder属性及颜色透明的属性值transparent，然后就可以开始实现各种三角形了。
正三角、倒三角、左三角、右三角、空心三角及直角三角。实现：创建div盒子，将宽高设为0，boder-with设置边框宽度（值要设置几十像素），再boder-style设置线条类型（使用solid，线条为实线），然后boder-color设置各边的颜色（用到颜色透明的属性值transparent）就完成了。
html代码：

<!--利用css中boder边框属性，使用transparent属性值设置背景颜色为透明-->
<div class="a">正三角</div>
<div class="b">倒三角</div>
<div class="c">左三角</div>
<div class="d">右三角</div>

<div class="e"></div>
<div class="ee">空心三角</div>

<div class="f">直角三角形</div>

css代码：

.a {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;
	border-color: transparent  transparent skyblue  transparent;  
}
.b {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;
	border-color: #FF69B4  transparent transparent  transparent;  
	margin: 40px 0;
}
.c {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;
	border-color: transparent  transparent transparent aqua;
}
.d {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;  
	border-color: transparent blue transparent  transparent;  
	margin: 40px 0;
}
.e {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;  
	border-color: transparent blue transparent  transparent;  
}
.ee {
	width: 0;
	height: 0;
	border-width: 40px;
	border-style: solid;  
	border-color: transparent white transparent  transparent;  
	position: absolute;   /*绝对定位*/
	top:578px;
	left: 24px;
}
.f {
	width: 0;
	height: 0;
	border-width: 50px;
	border-style: solid;
	border-color: transparent  #8B0000 #8B0000  transparent;  
	margin: 40px 0;
}

一点都不难，知道div盒子的boder属性有这个功能以及颜色透明的属性值transparent就可以完成了。空心三角形我用了两个三角形，第二个三角形比第一个三角形小并使用绝对定位到第一个三角形的位置，设置全透明就能看到了。