.skew { --skew-offset: 4.8rem; --skew-padding: 2.4rem; --skew-padding-large: 7rem; } .skew:first-of-type { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--skew-offset)), 0 100% ); padding: var(--skew-padding) var(--skew-padding) calc(var(--skew-padding-large) + var(--skew-offset)); } .skew:last-of-type { clip-path: polygon( 0 var(--skew-offset), 100% 0, 100% 100%, 0 100% ); padding: calc(var(--skew-padding-large) + var(--skew-offset)) var(--skew-padding) var(--skew-padding); } .skew + .skew { margin-top: calc(var(--skew-offset) * -1); clip-path: polygon( 0 var(--skew-offset), 100% 0, 100% calc(100% - var(--skew-offset)), 0 100% ); padding: calc(var(--skew-padding-large) + var(--skew-offset)) var(--skew-padding); }