一、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;
}
<div id="lock"></div>

转载请注明：谷谷点程序 » css 绘制锁形图标