Sanjeev K Sanjeev K - 4 months ago 14
HTML Question

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>

Answer

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);
}