CSS Battles
About
Github
Back
Battle: #42
<div class="main"> <div class="hair"></div> <div class="hair r"></div> <div class="eye"></div> <div class="eye r2"></div> <div class="mouth"></div> </div> <style> body { margin: 0; background: #293462; } div { position: absolute; background: #fff1c1; } .mouth { width: 40px; height: 10px; bottom: 20px; left: 80px; border-radius: 10px; } .eye { width: 60px; height: 60px; top: 90px; border-radius: 100%; left: 20px; } .hair { width: 100px; height: 100px; border-radius: 100%; top: -50px; } .r { right: 0; } .r2 { left: 120px; } .main { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 200px; background: #fe5f55; border-radius: 100px 100px 50px 50px; overflow: hidden; } </style>