利用伪类:before&&:after实现图标库图标

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、实现如下效果

二、代码实现思路

图案一源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类绘图</title>
<style>
.button {
display: inline-block;
position: relative;
font-size: 30px;
width: 90px;
height: 90px;
background-color: #00aabb;
cursor: pointer;
}
.button:after, .button:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 .5px rgba(177,177,177,.8);
/*box-shadow: inset 0 0 0 1em;内阴影*/
background: #FFF;
}
.button:before {
height: 1.5em;
width: 2px;
}
.button:after {
width: 1.5em;
height: 2px;
}
</style>
</head>
<body>
<div class="button"></div>
</body>
</html>

图案二源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>icon-img图标进阶玩法</title>
<style>
.icon-img {
display: inline-block;
position: relative;
height: 80px;
width: 100px;
border: solid 5px #00aabb;
border-radius: 5px;
font-size: 10px;
overflow: hidden;
}
.icon-img:before {
content: "";
position: absolute;
top: 18px;
right: 20px;
width: 15px;
height: 15px;
box-shadow: inset 0 0 0 15px #00AABB;
border-radius: 50%;
}
.icon-img:after {
content: "";
position: absolute;
left: 0;
bottom: -30px;
width: 80px;
height: 50px;
background-color: #00AABB; box-shadow: inset 0 0 0 50px #00AABB, 30px -20px 0 0 #00AABB;
transform: rotate(45deg); }
</style>
</head>
<body>
<div class="icon-img"></div>
</body>
</html>

利用伪类:before&&:after实现图标库图标的更多相关文章

简单的纯css重置input单选多选按钮的样式--利用伪类
由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...
利用伪类选择器与better-scroll的on事件所完成的上拉加载
之前给大家分享过一篇上拉加载利用了better-scroll的pullUpDown 和DOM元素的删除添加感觉那样不太好今天给大家分享一个不同的上拉加载思想代码如下 class List { ...
利用伪类写一个自定义checkbox和radio
首先是效果图来一张再来一张html结构关键的CSS来了~ 首先呢要把input标签设置为display: none; 因为自定义的原理是通过label的for属性,来点击label转向为点击in ...
如何利用伪类元素和vertical-align&colon; middle&semi;实现元素相对于父元素居中
HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...
利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
利用&colon;before和&colon;after伪类制作类似微信对话框
今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...
使用伪类(&colon;&colon;before/&colon;&colon;after)设置图标
使用伪类(::before/::after)设置文本前后图标.减少标签的浪费,使页面更加整洁. 如图: <!DOCTYPE html> <html> <head> ...
web之css伪类
利用伪类清楚浮动: 代码: <!DOCTYPE html> <htmllang="en"> <head> <metacharset=&qu ...
CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

随机推荐

waxpatch修改任意类的用法
例如:修改一个UIView(PJView)的子类和一个NSObject(PJModel)类,则需要在patch.lua文件中声明这两个要修改的类并且建立这些待修改的类的对应的.lua文件对应的.l ...
BZOJ 4245&colon; [ONTAK2015]OR-XOR
4245: [ONTAK2015]OR-XOR Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 492 Solved: 269[Submit][Sta ...
加密算法使用（一）：用CRC32来压缩32uuid字符串
CRC32相比MD5重复率较高, 不过我们仍然可以使用CRC32然后转长整形的方式将32位的UUID字符串压缩成更短的整形唯一标识. /** * * @Title: getCRC32Value * @ ...
innertext与innerhtml
<div id="test"> <span style="color:red">test1</span> test2 &lt ...
[置顶] PMBOOK第四版-ITO与数据流图总结
具体文档下载地址: 点击打开文档下载地址 :http://download.csdn.net/detail/lyjluandy/6694205 一.过程组与知识领域表(简图) 二.输入 - 工具 - ...
Linux内核源码分析--内核启动之(3)Image内核启动(C语言部分)（Linux-3&period;0 ARMv7）
http://blog.chinaunix.net/uid-20543672-id-3157283.html Linux内核源码分析--内核启动之(3)Image内核启动(C语言部分)(Linux-3 ...
tomcat 反代配置
tomcat反代可以基于nginx , http进行反代反代服务器: 有两个网口反代服务器一般有两块网卡一块处于外网,一块处于内网用于与后端服务器通信 tomcat 节点处于内网地址 1 tom ...
机器学习实战1-1 KNN电影分类遇到的问题
为什么电脑排版效果和手机排版效果不一样~ 目前只学习了python的基础语法,有些东西理解的不透彻,希望能一边看<机器学习实战>,一边加深对python的理解,所以写的内容很浅显,也许还会 ...
[原]IOS 后台发送邮件
skpsmtpmessage 是ios第三方后台发送邮件库 https://github.com/jetseven/skpsmtpmessage.git -(void)statrUpLoad:(id) ...
11 Mortal Fibonacci Rabbits
Problem Figure 4. A figure illustrating the propagation of Fibonacci's rabbits if they die after thr ...