CSS Battles
About
Github
Back
Battle: #100
<div class="bracket"></div> <div class="inlay"></div> <div class="buttons"></div> <div class="container"> <div class="l"> <div class="s-container"> <div class="blade2"></div> <div class="handle2"></div> <div class="hilt2"></div> </div> </div> <div class="l r"> <div class="s-container"> <div class="blade2"></div> <div class="handle2"></div> <div class="hilt2"></div> </div> </div> </div> <style> body { margin: 0; background: #14313e; } div { position: absolute; } .buttons { z-index: -1; transform: translate(-50%, -50%); left: 50%; top: 50%; height: 40px; width: 294px; background: #ffdf00; border-radius: 5px; } .inlay { transform: translate(-50%, -50%); left: 50%; top: 50%; width: 224px; height: 100px; background: #14313e; border-radius: 10px; } .bracket { background: #ffdf00; transform: translate(-50%, -50%); height: 100px; width: 224px; top: 50%; left: 50%; border: 25px solid #ffdf00; border-radius: 20px; } .container { transform: translate(-50%, -50%); top: 50%; left: 50%; height: 100%; width: 194px; background: #14313e; } .l { right: 24px; top: 71px; width: 160px; height: 160px; overflow: hidden; } .r { transform: scaleX(-1); right: 10px; z-index: 10px; } .hilt2 { background: #ffdf00; width: 80px; height: 20px; top: 109px; } .handle2 { background: #ffdf00; width: 20px; height: 50px; top: 119px; left: 30px; border-radius: 0 0 8px 8px; } .blade2 { background: #ffdf00; width: 30px; height: 200px; top: -100px; border: 10px solid #14313e; left: 15px; background-clip: padding-box; } .s-container { background: red; transform: rotate(45deg); left: 103px; top: 1px; } </style>