CSS Battles
About
Github
Back
Battle: #39
<div class="grn"></div> <div class="container outer"> <div class="yellow"></div> <div class="container"> <div class="yellow"></div> </div> </div> <style> body { margin: 0; background: #1a4341; } div { position: absolute; } .grn { width: 200px; height: 200px; background: #998235; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 100%; } .container { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 300px; height: 20px; background: #1a4341; border: 20px solid #1a4341; overflow: hidden; } .outer { height: 100px; } .yellow { background: #f3ac3c; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 100%; width: 250px; height: 250px; } </style>