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就可以完成了。空心三角形我用了兩個三角形，第二個三角形比第一個三角形小并使用絕對定位到第一個三角形的位置，設定全透明就能看到了。