Drehen Sie div und erstellen Sie ein ähnliches Layout

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

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>

Quelle

2016-08-09 Sanjeev Kumar

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

Quelle

2016-08-09 09:02:35 ristapk

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

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

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

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

Quelle

2016-08-09 09:50:03

Drehen Sie div und erstellen Sie ein ähnliches Layout

Antwort

Verwandte Themen