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!