转自:https://www.zhangxinxu.com/wordpress/2019/01/pure-css-shapes/
只摘了一个放大镜和锁子
#magnifying-glass {
font-size: 10em;
display: inline-block;
width: 0.4em; height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em; bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em; height: 0.08em;
transform: rotate(45deg);
}
#lock {
font-size: 8px;
position: relative;
width: 18em; height: 13em;
border-radius: 2em;
top: 10em;
box-sizing: border-box;
border: 3.5em solid red;
border-right-width: 7.5em;
border-left-width: 7.5em;
margin: 0 0 6rem 0;
}
#lock:before {
content: "";
box-sizing: border-box;
position: absolute;
border: 2.5em solid red;
width: 14em; height: 12em;
left: 50%;
margin-left: -7em; top: -12em;
border-top-left-radius: 7em;
border-top-right-radius: 7em;
}
#lock:after {
content: "";
box-sizing: border-box;
position: absolute;
border: 1em solid red;
width: 5em; height: 8em;
border-radius: 2.5em;
left: 50%; top: -1em;
margin-left: -2.5em;
}