Pure css process chart

by Manjula Dhamodharan

HTML

<div class="circle4">

<div class="half-circle"><div class="mytext"><b>Counter 9</b></div></div>
<div class="triangle"></div>
<div class="half-circle1"><div class="mytext"><b>Pending 3</b></div></div>
<div class="triangle1"></div>
<div class="half-circle2"><div class="mytext"><b>Submit 4</b></div></div>
<div class="triangle2"></div>
<div class="half-circle3"><div class="mytext"><b>Filed 6</b></div></div>
<div class="triangle3"></div>
</div>

CSS

.circle4{
 
    width: 350px;
    height: 350px;
    position: relative;
}
.half-circle {
    width: 100px;
    height: 100px;
 border:70px solid  #FFB6C1;
    border-top-left-radius: 100%;
    border-bottom: 0;
    border-right: 0px;
    top:10px;
    position:absolute;
}
.half-circle1 {
  position:absolute;
top:10px ;left:170px;
   -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 100px;
    height: 100px;
 border:70px solid  #FFFF00;
    border-top-left-radius: 100%;
    border-bottom: 0;
    border-right: 0px;
}
.half-circle2 {
  position:absolute;
bottom:0px ;left:170px;
   -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 100px;
    height: 100px;
 border:70px solid  #FFA500;
    border-top-left-radius: 100%;
    border-bottom: 0;
    border-right: 0px;
}
.half-circle3 {
  position:absolute;
bottom:0px ;left:0px;
 -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 100px;
    height: 100px;
  border:70px solid  #7CFC00;
    border-top-left-radius: 100%;
    border-bottom: 0;
    border-right: 0px;
}
.triangle {
    position: absolute;
    width: 100px;
    height: 100px;
    top:0px;
    background: #FFB6C1;
    margin-top: 0px;
    margin-left: 120px;
    z-index:100;
    
   -webkit-clip-path: polygon(100% 51%, 39% 0, 39% 100%);
clip-path: polygon(100% 51%, 39% 0, 39% 100%);
    
   
}
.triangle1 {
    position: absolute;
    width: 100px;
    height: 100px;
    top:130px;
    background: #FFFF00;
    margin-top: 0px;
    margin-left: 255px;
    z-index:100;
    
  -webkit-clip-path: polygon(100% 44%, 0 44%, 48% 100%);
clip-path: polygon(100% 44%, 0 44%, 48% 100%);
    
  ...