<p><p><div><p><p><hr></div><p a><p a> <style> * { background: #191919; margin: 0; } body { margin: 66px 100px; display: flex; align-items: center; flex-direction: column; } p { width: 30px; height: 20px; border: solid 10px #5DBCF9; } p + p { width: 80px; height: 50px; margin-top: -10px; border-bottom: none; } div > p { background: none; transform: rotate(30deg); margin: -10px 0 0 55px; width: 80px; height: 40px; border-left: 0px; border-bottom: 0px; } div > p + p { transform: rotate(-30deg) scaleX(-1); margin: -51px 0 0 1px; width: 80px; height: 40px; border-left: 0px; border-bottom: 0px; } hr { border: solid 5.5px #5DBCF9; transform: rotate(90deg); margin-top: 5px; width: 50%; margin: -25px 31px; } [a] { border: none; background: red; margin-top: 38px; background: #5DBCF9; height: 10px; border: solid 10px #191919; width: 100%; z-index: 1; } [a] + [a] { margin-top: -10px; width: 55%; } </style>