<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**綠色勾*/
.myicon-tick-checked {display: inline-block;position: relative;width: 15px;height: 15px;border-radius: 50%;background-color: #2ac845;}
/**灰色勾*/
.myicon-tick-uncheck {display: inline-block;position: relative;width: 15px;height: 15px;border-radius: 50%;background-color: #5f646e;}
.myicon-tick-checked:before, .myicon-tick-checked:after,.myicon-tick-uncheck:before,.myicon-tick-uncheck:after {content: '';pointer-events: none;position: absolute;color: white;border: 1px solid;background-color: white;}
.myicon-tick-checked:before,.myicon-tick-uncheck:before {width: 1px;height: 1px;left: 25%;top: 50%;transform: skew(0deg,50deg);}
.myicon-tick-checked:after,.myicon-tick-uncheck:after {width: 3px;height: 1px;left: 45%;top: 42%;transform: skew(0deg,-50deg);}
</style>
</head>
<body>
<span class="myicon-tick-checked"></span>
<span class="myicon-tick-uncheck"></span>
</body>
</html>
