纯css制作的打勾（√）小图标
生活随笔
收集整理的這篇文章主要介紹了
纯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 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 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 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 3px;
41 height: 1px;
42 left: 45%;
43 top: 42%;
44 transform: skew(0deg,-50deg);
45 }
46
47 .feature {
48 14px;
49 height: 6px;
50 display: inline-block;
51 border: 1px solid black;
52 border- 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 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>
總結
以上是生活随笔為你收集整理的纯css制作的打勾（√）小图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正月十六（ 正月十六，这些习俗你都知道吗
- 下一篇： 「已解决」本场音浪是什么意思