CSS Battles
About
Github
Back
Battle: #57
<div class="corner"><div class="dot"></div></div> <div class="corner a"><div class="dot"></div></div> <div class="corner b"><div class="dot"></div></div> <div class="corner c"><div class="dot"></div></div> <div class="center"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; } .center { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 110px; height: 110px; z-index: -10; background: #4f77ff; } .dot { width: 30px; height: 30px; background: #4f77ff; border-radius: 100%; box-shadow: 0.5rem 0.5rem 0 7.5px #f9e492, 15px 15px 0 15px #191919; top: 75px; left: 125px; } .corner { width: 200px; height: 50%; } .a { transform: rotate(180deg); right: 0; bottom: 0; } .b { transform: rotateY(180deg); right: 0; } .c { transform: rotateX(180deg); bottom: 0; } </style>