一、实现如下效果
二、代码实现思路
图案一源码
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>伪类绘图</title>
6 <style>
7 .button {
8 display: inline-block;
9 position: relative;
10 font-size: 30px;
11 width: 90px;
12 height: 90px;
13 background-color: #00aabb;
14 cursor: pointer;
15 }
16 .button:after, .button:before {
17 content: "";
18 position: absolute;
19 left: 50%;
20 top: 50%;
21 transform: translate(-50%, -50%);
22 box-shadow: 0 0 0 .5px rgba(177,177,177,.8);
23 /*box-shadow: inset 0 0 0 1em;内阴影*/
24 background: #FFF;
25 }
26 .button:before {
27 height: 1.5em;
28 width: 2px;
29 }
30 .button:after {
31 width: 1.5em;
32 height: 2px;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="button"></div>
38 </body>
39 </html>
图案二源码
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>icon-img图标进阶玩法</title>
6 <style>
7 .icon-img {
8 display: inline-block;
9 position: relative;
10 height: 80px;
11 width: 100px;
12 border: solid 5px #00aabb;
13 border-radius: 5px;
14 font-size: 10px;
15 overflow: hidden;
16 }
17 .icon-img:before {
18 content: "";
19 position: absolute;
20 top: 18px;
21 right: 20px;
22 width: 15px;
23 height: 15px;
24 box-shadow: inset 0 0 0 15px #00AABB;
25 border-radius: 50%;
26 }
27 .icon-img:after {
28 content: "";
29 position: absolute;
30 left: 0;
31 bottom: -30px;
32 width: 80px;
33 height: 50px;
34 background-color: #00AABB;
35
36 box-shadow: inset 0 0 0 50px #00AABB, 30px -20px 0 0 #00AABB;
37 transform: rotate(45deg); }
38 </style>
39 </head>
40 <body>
41 <div class="icon-img"></div>
42 </body>
43 </html>