<html> <head> <title></title> <style type="text/css"> /**绿色勾*/ .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>
效果图