CSS畫三角形集錦

triangle_up

向上三角形代碼：
<style type="text/css">
.tri-up {
border-color: #FFF #FFF #EED2EE #FFF;
border-style: solid;
border-width: 0 60px 100px 60px;
height: 0;
width: 0;
}
.tri-up-transparent {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #EED2EE;
}
</style>

triangle_right

向右三角形代碼：
<style type="text/css">
.tri-right {
border-color: #FFF #FFF #FFF #EED2EE;
border-style: solid;
border-width: 60px 0 60px 100px;
height: 0;
width: 0;
}
.tri-right-transparent {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid #EED2EE;
}
</style>

triangle_down

向下三角形代碼：
<style type="text/css">
.tri-down {
border-color: #EED2EE #FFF #FFF #FFF;
border-style: solid;
border-width: 100px 60px 0 60px;
height: 0;
width: 0;
}
.tri-down-transparent {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 100px solid #EED2EE;
}
</style>

triangle_left

向左三角形代碼：
<style type="text/css">
.tri-left {
border-color: #FFF #EED2EE #FFF #FFF;
border-style: solid;
border-width: 60px 100px 60px 0;
height: 0;
width: 0;
}
.tri-left-transparent {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 100px solid #EED2EE;
}
</style>

請大家多多鼓勵！