@CHARSET "ISO-8859-1"; .icon-lock { width: 48px; height: 48px; position: relative; overflow: hidden; margin-left: 25px; margin-bottom: 25px; } .icon-lock .lock-top-1 { width: 40%; height: 40%; position: absolute; left: 50%; margin-left: -20%; top: 14%; background-color: #000; border-radius: 40%; } .icon-lock .lock-top-2 { width: 24%; height: 40%; position: absolute; left: 50%; margin-left: -12%; top: 22%; background-color: #151517; border-radius: 25%; } .icon-lock .lock-body { width: 60%; height: 48%; position: absolute; left: 50%; margin-left: -30%; bottom: 11%; background-color: #000; border-radius: 15%; } .icon-lock .lock-hole { width: 16%; height: 16%; position: absolute; left: 50%; margin-left: -8%; top: 51%; border-radius: 100%; background-color: #151517; } .icon-lock .lock-hole:after { content: ""; width: 43%; height: 78%; position: absolute; left: 50%; margin-left: -20%; top: 100%; background-color: inherit; }