一、实现如下效果
二、代码实现思路
图案一源码
<!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>