純css製作的打勾（√）小圖示
阿新 • • 發佈：2020-12-28
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>