CSS Battles
About
Github
Back
Battle: #60
<div class="box"> <div class="t l"></div> <div class="t r"></div> <div class="t b l"></div> <div class="t b r"></div> <div class="t2"></div> <div class="t2 c"></div> <div class="t2 d"></div> </div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .box { width: 200px; height: 150px; transform: translate(-50%, -50%); top: 50%; left: 50%; overflow: hidden; } .t { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid #4f77ff; } .t2 { width: 0; height: 0; bottom: 50px; left: 50px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #4f77ff; } .c { left: -50px; } .d { left: 150px; } .l { right: 50%; } .r { left: 50%; } .b { bottom: 0; } </style>