2016-08-09 38 views
0

Ich versuche, ein Layout nach dem Bild zu schaffen, aber in der Mitte verloren und verwirrt, wie es behandelt werden soll, kann jemand nur eine Idee über den besten Weg, um es zu erreichen?Drehen Sie div und erstellen Sie ein ähnliches Layout

Beachten Sie, dass jede Box einen Hover-Effekt hat.

Ich habe versucht, zu schaffen, hier ist mein 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> 

Antwort

2

Ich habe dieses codepen für Sie, mir sagen, wenn Sie weitere Hilfe benötigen: 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); 
} 
+0

Dank für Antwort @ristapk, aber das Problem ist, wenn ich conti verwende Ner-Fluid statt Container, alles vermasselt. –

+0

Es geht um Höhen. Setzen Sie einfach eine neue Höhe ... Der beste Weg, dies zu tun ist, um die gleiche Höhe wie Breite, ich werde es jetzt mit jquery, ein einfaches Snippet schreiben .. – ristapk

+0

Es wird etwas wie: $ (Dokument) .ready (Funktion() { $ ('. col-md-3'). Höhe (Math.round ($ ('. col-md-3'). Breite()) + 25); }); – ristapk

0

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