生活随笔
收集整理的這篇文章主要介紹了
css实现对勾
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**綠色勾*/
.myicon-tick-checked {display: inline-block;position: relative; 15px;height: 15px;border-radius: 50%;background-color: #2ac845;}
/**灰色勾*/
.myicon-tick-uncheck {display: inline-block;position: relative; 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 { 1px;height: 1px;left: 25%;top: 50%;transform: skew(0deg,50deg);}
.myicon-tick-checked:after,.myicon-tick-uncheck:after { 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>
總結
以上是生活随笔為你收集整理的css实现对勾的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
