:root { --skew-depth: 4rem; --skew-side-depth: var(--skew-depth); } body, .skew-area { isolation: isolate; } #brx-content { isolation: auto; } :is(.skew, .skew-top, .skew-bottom, .skew-left, .skew-right, .skew-sides) { position: relative; } :is(.skew, .skew-top, .skew-bottom, .skew-left, .skew-right, .skew-sides)::before, .skew-overlay::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .skew::before, .skew.skew-overlay::after { clip-path: polygon(0 var(--skew-depth), 100% 0, 100% calc(100% - var(--skew-depth)), 0 100%); } .skew-top::before, .skew-top.skew-overlay::after { clip-path: polygon(0 var(--skew-depth), 100% 0, 100% 100%, 0 100%); } .skew-bottom::before, .skew-bottom.skew-overlay::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skew-depth)), 0 100%); } .skew + .skew, .skew-bottom + .skew, .skew + .skew-top, .skew-bottom + .skew-top { margin-top: calc(-1 * var(--skew-depth)); } #brx-content:has(> :is(.skew, .skew-bottom):last-child) + #brx-footer:has(> :is(.skew, .skew-top):first-child) { margin-top: calc(-1 * var(--skew-depth)); } .skew-left::before, .skew-left.skew-overlay::after { clip-path: polygon(var(--skew-side-depth) 0, 100% 0, 100% 100%, 0 100%); } .skew-right::before, .skew-right.skew-overlay::after { clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew-side-depth)) 100%, 0 100%); } .skew-sides::before, .skew-sides.skew-overlay::after { clip-path: polygon(var(--skew-side-depth) 0, 100% 0, calc(100% - var(--skew-side-depth)) 100%, 0 100%); } :is(.skew-right, .skew-sides) + :is(.skew-left, .skew-sides) { margin-left: calc(-1 * var(--skew-side-depth)); } :is(.skew-line-top, .skew-line-bottom, .skew-line-left, .skew-line-right) { position: absolute; margin: 0; transform: translate(-50%, -50%); z-index: 1; } .skew-line-top { top: calc(var(--skew-depth) / 2); left: 50%; } .skew-line-bottom { top: calc(100% - var(--skew-depth) / 2); left: 50%; } .skew-line-left { left: calc(var(--skew-side-depth) / 2); top: 50%; } .skew-line-right { left: calc(100% - var(--skew-side-depth) / 2); top: 50%; }