纯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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题: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#中正则表达式的使用