<div class="step1"></div> <div class="step2"></div> <div class="step3"></div> <div class="step4"></div>
div { display: inline-block; } .step1 { width: 50px; height: 50px; background-color: #F00; border: solid 10px #0F0; } .step2 { width: 50px; height: 50px; border-style: solid; border-width: 10px; background-color: #F00; border-top-color: #0F0; border-left-color: #0B0; border-bottom-color: #080; border-right-color: #040; } .step3 { width: 0; height: 0; border-style: solid; border-width: 10px; background-color: #F00; border-top-color: #0F0; border-left-color: #0B0; border-bottom-color: #080; border-right-color: #040; } .step4 { width: 0; height: 0; border-style: solid; border-width: 10px; background-color: transparent; border-top-color: transparent; border-left-color: transparent; border-bottom-color: #080; border-right-color: transparent; }