CODEWITHSUNDEEP
htmlcsscss-transforms
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Rotate div and create similar layout

I am trying to create a layout as per the image attached but lost in mid and confused how its going to be handled, can anybody just give an idea about the best way to achieve it?

Keeping in mind every box will have a hover effect.

I have tried creating, here is my code

Sample image for roatated div

CSS

 body{overflow:hidden;}
.row{width:100%; float:left; border:2px solid #f00; border-left:0; border-right:0; -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg);}
.row > .col33{float:left; width:33%; height:350px; display:block;}
.row:nth-child(1){margin:0 0 0 -250px ;}
.row:nth-child(2){margin:-133px 0 0 -120px; width:120%;}

HTML

<div class="row">
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
</div>
<div class="row">
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
</div>

Upvotes: 0

Views: 70

Answers (2)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

.rotetedDiv{
  border: 1px solid gold;
  height: 300px;
  background: #600;
  -ms-transform: skewY(-35deg); /* IE 9 */
  -webkit-transform: skewY(-35deg); /* Safari */
  transform: skewY(-35deg);
}
<div class="container">
  <div class="row">
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
  </div>
</div>

Upvotes: 0

ristapk
ristapk

Reputation: 1372

I made this codepen for you, tell me if you need more help: http://codepen.io/bra1N/pen/RRqYPX

HTML: 

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

CSS: 

.col-md-3{
  border: 1px solid black;
  height: 240px;
  background: cyan;
  -ms-transform: skewY(-40deg); /* IE 9 */
  -webkit-transform: skewY(-40deg); /* Safari */
  transform: skewY(-40deg);
}

Upvotes: 2

Related Questions