纯css制作的打勾（√）小图标 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         /**绿色勾*/
 7         .myicon-tick-checked {
 8             display: inline-block;
 9             position: relative;
10             width: 15px;
11             height: 15px;
12             border-radius: 50%;
13             background-color: #2ac845;
14         }
15         /**灰色勾*/
16         .myicon-tick-uncheck {
17             display: inline-block;
18             position: relative;
19             width: 15px;
20             height: 15px;
21             border-radius: 50%;
22             background-color: #5f646e;
23         }
24             .myicon-tick-checked:before, .myicon-tick-checked:after, .myicon-tick-uncheck:before, .myicon-tick-uncheck:after {
25                 content: '';
26                 pointer-events: none;
27                 position: absolute;
28                 color: white;
29                 border: 1px solid;
30                 background-color: white;
31             }
32             .myicon-tick-checked:before, .myicon-tick-uncheck:before {
33                 width: 1px;
34                 height: 1px;
35                 left: 25%;
36                 top: 50%;
37                 transform: skew(0deg,50deg);
38             }
39             .myicon-tick-checked:after, .myicon-tick-uncheck:after {
40                 width: 3px;
41                 height: 1px;
42                 left: 45%;
43                 top: 42%;
44                 transform: skew(0deg,-50deg);
45             }
46 
47         .feature {
48             width: 14px;
49             height: 6px;
50             display: inline-block;
51             border: 1px solid black;
52             border-width: 0 0 1px 1px;
53             transform: rotate(-45deg);
54             -ms-transform: rotate(-45deg);
55             -moz-transform: rotate(-45deg);
56             -webkit-transform: rotate(-45deg);
57             -o-transform: rotate(-45deg);
58             vertical-align: baseline;
59         }
60         div {
61             width: 100px;
62             height: 100px;
63             position: absolute;
64             left: 50%;
65             top: 50%;
66             margin: -50px 0 0 -50px;
67         }
68     </style>
69 </head>
70 <body>
71     <div>
72         <span class="myicon-tick-checked"></span><br />
73         <span class="myicon-tick-uncheck"></span><br />
74         <span class="feature"></span>
75     </div>
76 </body>
77 </html>

 

posted @ 2020-12-28 17:07  每天进步多一点  阅读(3061)  评论(0)    收藏  举报