css如何实现一把锁图形

这篇文章将为大家详细讲解有关css如何实现一把锁图形，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

锁

#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;}

关于"css如何实现一把锁图形"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。