I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen resizes.
Is there a way to vertically align the top edge of each slanted shape with the bottom edge of the one above it?
Currently, my solution involves adjusting the left position of the ::before pseudo-element on the skewed shapes. But I am seeking a more efficient approach to achieve this responsiveness as the layout evolves with varying screen sizes.
https://i.stack.imgur.com/pSluF.png
.slant::before {
background-color: lightblue;
}
.lr .right-content,
.rr .left-content {
background-color: green;
}
.lr .slant,
.rr .slant {
position: relative;
}
.lr .slant::before,
.rr .slant::before {
content: '';
transform-origin: 100% 0%;
position: absolute;
top: 0;
bottom: 0;
}
.lr .slant::before {
transform: skewX(-10deg);
left: -100vw;
right: 0;
}
.rr .slant::before {
transform: skewx(10deg);
left: 0;
right: -100vw;
}<div class="container">
<div class="row lr one">
<div class="col-xs-5 left-content slant">
<h1>Title</h1>
</div>
<div class="col-xs-7 right-content">
</div>
</div>
<div class="row rr card two">
<div class="col-xs-5 left-content">
</div>
<div class="col-xs-7 right-content slant">
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
</div>
</div>
...
</div>