纯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 @   每天进步多一点  阅读(2926)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2017-12-28 LINQ 常见用法
2017-12-28 C# 委托
2017-12-28 C#正则表达式语法规则详解
2017-12-28 C#中正则表达式的使用
点击右上角即可分享
微信分享提示