CSS Battles
About
Github
Back
Battle: #21
<div> <span></span> <span></span> <span></span> <span></span> </div> <style> span { position: absolute; } span:nth-of-type(1) { background: #f2994a; width: 100px; height: 30px; border-radius: 10px 0 0; } span:nth-of-type(2) { width: 30px; height: 80px; background: #f2994a; border-radius: 10px 0 5px; } span:nth-of-type(3) { width: 100px; height: 30px; bottom: 0; right: 0; border-radius: 0 0 10px; background: #2d9cdb; } span:nth-of-type(4) { width: 30px; height: 80px; bottom: 0; right: 0; border-radius: 5px 0 10px; background: #2d9cdb; } div { position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg); top: 50%; left: 50%; width: 82px; height: 130px; } body { margin: 0; background: #222; } </style>