6 slanted div in bootstrap 4

问题

I am trying to create a block with 6 slanted divs in bootstrap. Check the image below

I have tried with rows and columns but they are not correctly aligned with each other. see image below

I also tried this answer but it only works with 1 row if I create a 2-row layout like the above image it's breaking the alignment. Can anyone please show me how I can achieve the following 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);
}

.section-3 .part3 {
  clip-path: polygon(8% 1%, 100% 0%, 100% 100%, 0 100%);
}

.section-4 {
  /*height: 270px;*/
  /*    overflow-x: hidden;*/
}

.section-4 .part1 {
  background-image: linear-gradient(to right, rgb(0, 0, 0, 0.80), rgb(0, 0, 0, 0.80)), url('../images/part1.png');
  clip-path: polygon(0 1%, 100% 0%, 88% 100%, 0 100%);
}

.section-4 .part1 .part-text {
  margin-left: 50px;
}

.section-4 .part2 {
  background-image: url('../images/part2.png');
  background-size: cover;
  background-repeat: no-repeat;
  transform: skew(-14deg);
  min-height: 186px;
}

.section-4 .part3 {
  background-image: url('../images/part3.png');
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(12% 1%, 100% 0%, 100% 100%, 0 100%);
  min-height: 186px;
}

<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>

回答1:

You need to keep the use of one row and consider 3 columns and inside each column you have title + image:

.title {
  background: #f2f2f2;
}

.img {
  min-height: 300px;
  background: center/cover no-repeat;
}

.col:first-child {
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 0 100%);
  margin-right: -5vw;
}

.col:nth-child(2) {
  clip-path: polygon(10vw 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 15px 100%);
  margin: 0 -5vw;
}

.col:last-child {
  clip-path: polygon(10vw 0, 100% 0, 100% 100%, 15px 100%);
  margin-left: -5vw;
}

/* rectify the alignment of the text */
.col:nth-child(2) > .title,
.col:last-child > .title{
  padding-left: calc(10vw - 15px)!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row text-center">
    <div class="col">
      <div class="title p-3">Title 1</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 2</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 3</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
    </div>
  </div>
</div>

I have used vw to control the skew but you can consider a CSS variable that you can easily adjust

:root {
  --s:10vw;
}

.title {
  background: #f2f2f2;
}

.img {
  min-height: 200px;
  background: center/cover no-repeat;
}

.col:first-child {
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - var(--s)) 100%, 0 100%);
  margin-right: calc(-1*var(--s)/2);
}

.col:nth-child(2) {
  clip-path: polygon(var(--s) 0, calc(100% - 15px) 0, calc(100% - var(--s)) 100%, 15px 100%);
  margin: 0 calc(-1*var(--s)/2);
}

.col:last-child {
  clip-path: polygon(var(--s) 0, 100% 0, 100% 100%, 15px 100%);
  margin-left: calc(-1*var(--s)/2);
}

/* rectify the alignment of the text */
.col:nth-child(2) > .title,
.col:last-child > .title{
  padding-left: calc(var(--s) - 15px)!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row text-center">
    <div class="col">
      <div class="title p-3">Title 1</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 2</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 3</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
    </div>
  </div>
</div>

<div class="container-fluid mt-2" style="--s:100px;">
  <div class="row text-center">
    <div class="col">
      <div class="title p-3">Title 1</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 2</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
    </div>
    <div class="col">
      <div class="title p-3">Title 3</div>
      <div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/62719755/6-slanted-div-in-bootstrap-4

标签

html

css

bootstrap-4