html图标加锁标志,css 绘制锁形图标

二、效果

三、代码#lock {

font-size: 8px;

position: relative;

width: 8em;

height: 6em;

border-radius: 1em;

top: 5em;

box-sizing: border-box;

border: 3em solid red;

margin: 0 0 6rem 0;

}

#lock:before {

content: "";

box-sizing: border-box;

position: absolute;

border: 1em solid red;

width: 6em;

height: 6em;

left: 50%;

margin-left: -3em;

top: -7em;

border-top-left-radius: 3em;

border-top-right-radius: 3em;

}

#lock:after {

content: "";

box-sizing: border-box;

position: absolute;

border: 1em solid white;

width: 1em;

height: 2em;

border-radius: .5em;

left: 50%;

top: -1em;

margin-left: -1em;

}

.....