Make Triangle by using Border Property in CSS / CSS의 보더속성 이용하여 삼각형 만들기

<div class="triangle"></div>
<div class="triangle01"></div>
<div class="triangle02"></div>
<div class="triangle03"></div>

<style>
.triangle {
width:0;
height:0;
border-left:200px solid pink;
border-right:200px solid yellow;
border-top:200px solid orange;
border-bottom:200px solid skyblue;
float:left;
}
.triangle01 {
width:0;
height:0;
border-left:200px solid pink;
border-right:200px solid transparent;
border-top:200px solid transparent;
border-bottom:200px solid transparent;
float:left;
}
.triangle02 {
width:0;
height:0;
border-left:200px solid pink;
border-right:200px solid transparent;
border-top:0 solid transparent;
border-bottom:200px solid transparent;
float:left;
}
.triangle03 {
width:0;
height:0;
border-left:400px solid pink;
border-right:0px solid transparent;
border-top:200px solid transparent;
border-bottom:200px solid transparent;
float:left;
}
</style>