CSS Battles
About
Github
Back
Battle: #10
<div class="circle cm"></div> <div class="circle cr"></div> <div class="circle cl"></div> <div class="bottom"></div> <div class="middle"></div> <style> .bottom { z-index: -1; position: absolute; width: 300px; height: 200px; left: 50px; top: 200px; background: #f7ec7d; } .middle { background: #f7ec7d; z-index: -1; position: absolute; width: 100px; height: 200px; left: 150px; top: 100px; background: #f7ec7d; } .cl { top: 200px; left: 100px; border: 20px solid #aa445f; background: #e38f66; } .cr { top: 200px; left: 300px; border: 20px solid #aa445f; background: #e38f66; } .cm { border: 20px solid #e38f66; background: #aa445f; left: 50%; top: 100px; } .circle { position: absolute; width: 60px; height: 60px; border-radius: 100%; transform: translateX(-50%) translateY(-50%); } body { margin: 0; background: #62306d; } </style>