css‎ > ‎

Check Mark in green Circle

posted Sep 21, 2017, 4:26 AM by Chris Franklin   [ updated Sep 21, 2017, 4:26 AM ]
  • no Javascript or Images

css

.checkmark {
 display:inline-block;
 width: 22px;
 height:22px;
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 margin-top: 3px;
}

.checkmark_circle {
 position: absolute;
 width:22px;
 height:22px;
 background-color: green;
 border-radius:11px;
 left:0;
 top:0;
}

.checkmark_stem {
 position: absolute;
 width:3px;
 height:9px;
 background-color:#fff;
 left:11px;
 top:6px;
}

.checkmark_kick {
 position: absolute;
 width:3px;
 height:3px;
 background-color:#fff;
 left:8px;
 top:12px;
}

html

<span class="checkmark">
 <div class="checkmark_circle"></div>
 <div class="checkmark_stem"></div>
 <div class="checkmark_kick"></div>
</span>



Comments