CSS Battles
About
Github
Back
Battle: #47
<div class="c cc"></div> <div class="r"></div> <div class="r2"></div> <div class="r3"></div> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <style> body { background: #1a4341; margin: 0; } div { position: absolute; } .a1 { width: 30px; height: 30px; background: #998235; border-radius: 100%; top: 120px; left: 170px; } .a2 { width: 20px; height: 20px; background: #998235; border-radius: 100%; top: 165px; right: 190px; } .a3 { width: 10px; height: 10px; background: #998235; border-radius: 100%; top: 120px; right: 170px; } .c { transform: translate(-50%, -50%); background: #f3ac3c; width: 100px; height: 100px; border-radius: 100%; top: 50%; left: 50%; } .r { transform: translate(-50%, -100px); background: #f3ac3c; width: 10px; height: 180px; top: 50%; left: 50%; border-radius: 5px; } .r2 { background: #f3ac3c; height: 180px; width: 10px; border-radius: 5px; top: 55px; left: 204px; transform: rotate(60deg); } .r3 { background: #f3ac3c; height: 180px; width: 10px; border-radius: 5px; top: 65px; left: 204px; transform: rotate(120deg); } </style>