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

实现效果：

代码：

<html>

<head>
<title></title>
<style type="text/css">
/**绿色勾*/
.myicon-tick-checked {
display: inline-block;
position: relative;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #2ac845;
}

/**灰色勾*/
.myicon-tick-uncheck {
display: inline-block;
position: relative;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #5f646e;
}

.myicon-tick-checked:before, .myicon-tick-checked:after,.myicon-tick-uncheck:before,.myicon-tick-uncheck:after {
content: '';
pointer-events: none;
position: absolute;
color: white;
border: 1px solid;
background-color: white;
}

.myicon-tick-checked:before,.myicon-tick-uncheck:before {
width: 1px;
height: 1px;
left: 25%;
top: 50%;
transform: skew(0deg,50deg);
}

.myicon-tick-checked:after,.myicon-tick-uncheck:after {
width: 3px;
height: 1px;
left: 45%;
top: 42%;
transform: skew(0deg,-50deg);
}

</style>
</head>

</body>

</html>

纯css制作的打勾（√）小图标相关推荐

纯css实现导航处hot小图标实现
先上效果图: 纯css实现导航处hot小图标实现 css代码: .shop{ position: relative; } .shop a:after{ background-color: red; b ...
css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
用HTML+css制作一个动态的天气图标
前言本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的一.HTML部分 <!DOCTYPE html& ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
css3 乌云散去,纯css实现乌云密布的天气图标效果
效果效果如下实现思路使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影增加动画 dom结构用两个嵌套的div容器,父容器来 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
[css] 用css实现一个等腰三角形的小图标
[css] 用css实现一个等腰三角形的小图标 <style>.box{width: 0;height: 0;margin: 100px auto;border-width: 0px 20 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...

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

纯css制作的打勾（√）小图标相关推荐

最新文章

热门文章