css pointer

by lazydayed

HTML

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

CSS

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;
}