CSS Battles
About
Github
Back
Battle: #86
<div class="frame"> <div class="step s1"></div> <div class="step s4"></div> <div class="step s3"></div> <div class="step s2"></div> </div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .frame { transform: translate(-50%, -50%); width: 100px; height: 150px; background: #4f77ff; top: 50%; left: 50%; border-radius: 50px 50px 0 0; } .step { bottom: 0px; background: #191919; width: 100px; height: 20px; } .s1 { left: 20px; } .s2 { left: 40px; bottom: 24px; } .s3 { left: 60px; bottom: 48px; } .s4 { left: 80px; bottom: 72px; } </style>