CSS Battles
About
Github
Back
Battle: #50
<div class="bottom"></div> <div class="swirl-1"></div> <div class="swirl-2"></div> <div class="top"></div> <div class="cap"></div> <div class="straw"></div> <div class="pump"></div> <div class="spout"></div> <div class="drop1"></div> <div class="drop2"></div> <style> body { background: #1a4341; margin: 0; } div { position: absolute; } .drop1 { left: 280px; top: 100px; width: 20px; height: 20px; border-radius: 100%; background: #998235; } .drop2 { left: 280px; top: 130px; width: 20px; height: 20px; border-radius: 100%; background: #998235; } .spout { top: 50px; left: 280px; width: 20px; height: 40px; background: #f3ac3c; border-radius: 20px; } .pump { top: 50px; left: 150px; width: 150px; height: 20px; background: #f3ac3c; border-radius: 20px; } .straw { top: 70px; left: 190px; width: 20px; height: 20px; background: #f3ac3c; } .cap { top: 90px; left: 175px; height: 20px; width: 50px; background: #f3ac3c; border-radius: 10px 10px 0 0; } .top { z-index: -10; top: 110px; left: 150px; width: 100px; height: 100px; background: #f3ac3c; border-radius: 20px 20px 0 0; } .swirl-2 { z-index: 1; top: 140px; left: 200px; height: 50px; width: 50px; background: #f3ac3c; border-radius: 0 0 50px 50px; } .swirl-1 { bottom: 110px; left: 150px; height: 50px; width: 50px; background: #998235; border-radius: 50px 50px 0 0; } .bottom { bottom: 50px; left: 150px; height: 90px; width: 100px; background: #998235; border-radius: 0 0 20px 20px; } </style>