Explaining border traingles

see the div having all four borders http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work

by prasun_sultania

HTML

<div class="step1"></div>
<br/>
<div class="step2"></div>
<br/>
<div class="step3"></div>
<br/>
<div class="step4"></div>

CSS

/*Borders are inclined at 45 degree*/
.step1{
   width: 0px; 
   height: 0px;
   border-width: 30px;
   border-color: red blue yellow green;
   border-style: solid;   
}

.step2{
   width: 0px; 
   border-width: 0px 30px 30px 30px;
   border-color: red blue yellow green;
   border-style: solid;   
}

.step3{
   width: 0px; 
   border-width: 0px 30px 30px 30px;
   border-color: red blue yellow transparent;
   border-style: solid solid solid solid;   
}

.step4{
   width: 0px; 
   border-width: 0px 30px 30px 30px;
   border-color: red transparent yellow transparent;
   border-style: solid solid solid solid;   
}