I'm currently in the process of constructing a block with 6 slanted divs using Bootstrap. Take a look at the image provided below:
https://i.sstatic.net/vvg0b.png
After attempting to use rows and columns, I noticed that they weren't aligning correctly with each other as shown in the following image:
https://i.sstatic.net/HobsX.png
Although I also attempted the solution suggested here, I found that it only worked for a single row layout. When trying to create a 2-row layout like the one depicted in the image above, the alignment breaks. Could someone please demonstrate how I can achieve the desired layout?
.section-3 .part1 {
clip-path: polygon(0 1%, 100% 0%, 93% 100%, 0 100%);
}
.section-3 .part2 {
border: 2px solid black;
transform: skew(-20deg);
}
... (additional CSS code omitted for brevity)
<section> - HTML code has been slightly modified
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="row section-3 text-white animated fadeInLeftBig">
<div class="col-md-4 pt-3 pb-3 mb-3 bg-black part1">
<h3 class="text-white font-italic"><strong>PEOPLE</strong></h3>
</div>
<div class="col-md-4 pt-3 pb-3 mb-3 part2">
<h3 class="text-black"><strong>PROMISE</strong></h3>
</div>
<div class="col-md-4 pt-3 pb-3 mb-3 pl-xl-5 pl-md-5 pl-xs-1 bg-blue part3">
<h3 class="text-white font-italic"><strong>PROGRESS</strong></h3>
</div>
</div>
<div class="row section-4 text-white animated fadeInRightBig">
<div class="col-md-4 mb-3 bg-black part1 pr-md-5">
<h3 class="text-white pt-5 pt-md-3 pl-xl-5 pl-3"><strong>We put our<br> people first</strong></h3>
<p class="pl-xl-5 pl-3">Learn how we value our people<br>Become part of our family</p>
</div>
<div class="col-md-4 mb-3 part2"></div>
<div class="col-md-4 mb-3 part3"></div>
</div>