How make rotate four column using CSS?

Question

I have four columns and i need to make its like rotate as given below image:-

What i want:-

What i tried:-

  .parent-box{ width:100%; background:#00CC66; overflow:hidden; height:400px;}
  .my-box{ background:#f1f1f1; border:1px solid #ccc; height:600px; transition:all; transform:rotate(20deg); margin-top:-100px;}
  .first{ width:33%;}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row m-0 parent-box">
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
</div>

</body>
</html>

How to make it same as given in image?

Answer will be appreciated!

another related question in addition to the duplicate: https://stackoverflow.com/q/49289529/8620333 — Temani Afif, Nov 05 '19 at 08:52

score 0 · Answer 1 · edited May 21 '21 at 21:43

Try with this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
  .parent-box{ width:100%; background:#00CC66; overflow:hidden; height:400px;}
  .my-box{ background:#f1f1f1; border:1px solid #ccc; height:600px; transition:all; transform:rotate(12deg); margin-top:-100px;}
  .first{ width:33%;}
  .parent-box .col{padding: 0;}
</style>
<body>
    <div class="row m-0 parent-box">
        <div class="col"><div class="my-box1"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box1"></div></div>
    </div>
</body>
</html>

This is not exactly matched what i want... – Rohit Verma Nov 05 '19 at 07:25 — Rohit Verma, Nov 05 '19 at 07:25

score 0 · Answer 2 · answered Nov 05 '19 at 07:31

I have done what is exactly what i wanted :)

.parent-box{ width:100%; background:#00CC66; overflow:hidden; height:400px;}
  .my-box{ background:#f1f1f1; border:1px solid #ccc; height:600px; transition:all; transform:rotate(12deg); margin-top:-100px; z-index:2; position:relative;}
   .my-box-left{background:#f1f1f1; border:1px solid #ccc; height:600px; margin-top:-100px; margin-right:-40px;}
   .my-box-right{background:#f1f1f1; border:1px solid #ccc; height:600px; margin-top:-100px; margin-left:-40px; z-index:1; position:relative;}
    .first{ width:33%;}
  .parent-box .col{padding: 0;}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="row m-0 parent-box">
        <div class="col"><div class="my-box-left"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box-right"></div></div>
    </div>
 
</body>
</html>

score 0 · Answer 3 · answered Nov 05 '19 at 07:34

You can achieve this by rotating only the 2nd and 3rd column. and increasing the width of first and last column. And adjust the last column z-index so that it is not hidden.

Please refer the snippet below.

.parent-box {
  width: 100%;
  background: #00CC66;
  overflow: hidden;
  height: 400px;
}

.my-box {
  background: #f1f1f1;
  border: 1px solid #ccc;
  height: 600px;
  transition: all;
  margin-top: -100px;
}
.first{
 width:calc(100% + 17px);
}
.last{
 width:calc(100% + 17px);
 margin-left:-17px;
}
.rotate{
  transform: rotate(5deg);
  margin-left:0px;
}
.col:first{
  width:calc(25% + 50px);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row m-0 parent-box">
    <div class="col p-0 b-1">
      <div class="my-box first"></div>
    </div>
    <div class="col p-0 b-1" style="z-index:1">
      <div class="my-box rotate"></div>
    </div>
    <div class="col p-0 b-1" style="z-index:1">
      <div class="my-box rotate"></div>
    </div>
    <div class="col p-0 b-1" style="z-index:0">
      <div class="my-box last"></div>
    </div>
  </div>

</body>

</html>

score 0 · Answer 4 · answered Nov 05 '19 at 07:41

.parent-box {
  width:100%; 
  background:#fff;
  overflow:hidden; 
  height:400px;
}

.my-box {
  height:600px; 
  transition:all; 
}

.my-box-img {
  background: url('https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/w_2560%2Cc_limit/Comparison-City-MAIN-ART.jpg');
  height:600px; 
  margin-top:-100px;
  background-size: cover;
}

.col {
  transform: skew(-10deg);
  padding: 0 !important;
}

.first { 
  width:33%;
}

.my-box h2 {
  transform: skew(10deg);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="row m-0 parent-box">
      <div class="col">
        <div class="my-box">
          <h2>Lorem Ipsum</h2>
        </div>
      </div>
      <div class="col"><div class="my-box-img">
        </div></div>
      <div class="col"><div class="my-box-img"></div></div>
      <div class="col"><div class="my-box-img"></div></div>
    </div>
  </body>
</html>

Using skew is a better option I feel. If you use transform: skew(10deg) then you won't need any margin. Hope it'll help

Consider that skew effect will also applies to content inside. — Hải Bùi, Nov 05 '19 at 08:01
for that you have to give skew(-10deg) to the child @HảiBùi — nazifa rashid, Nov 05 '19 at 09:35

score 0 · Answer 5 · answered Nov 05 '19 at 07:59

You can use clip-path attribute to make this

.parent-box {
  width: 100%;
  height: 500px;
  display: flex;
}

.my-box{ height:100%; width: 100%; }
.my-box:not(:first-child){ margin-left: -5.5% }

.my-box:nth-child(1) { 
  background:#f1f1f1;
  clip-path: polygon(0% 0%, 100% 0, 80% 100%, 0% 100%); 
}
.my-box:nth-child(2) {
  background: #eee;
  clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0% 100%);
}
.my-box:nth-child(3) { 
  background:#bebebe;
  clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0% 100%); 
}
.my-box:nth-child(4) { 
  background:#acacac;
  clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="parent-box">
    <div class="my-box"></div>
    <div class="my-box"></div>
    <div class="my-box"></div>
    <div class="my-box"></div>
</div>
 
</body>
</html>

How make rotate four column using CSS?

5 Answers5