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