Wie div Layout mit CSS verzerren, und Bild zu füllen, verzerren Bereich

Question

Ich hoffe, Sie können helfen, wie ich mit diesem den ganzen Tag gekämpft habe.

Unser Designer hat ein Design entwickelt, bei dem die Seiten auf der Seite schief stehen, mit Text auf der einen Seite und Bild auf der anderen Seite.

Er möchte jedoch, dass das Bild auf der rechten Seite den Bereich füllt, der aussieht, als würde es unter die linke Seite fallen, so dass das linke Feld oben das Bild überlappen scheint.

Ein Beispiel für Sie:

HTML ist in diesem Stadium ziemlich einfach:

<div class="rr rr-left"> 
    <div> 
     <h2>ABOUT</h2> 
     <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p> 
    </div> 
</div> 
<div class="rr rr-right"> 
</div> 

Und hier ist die CSS hier von einem anderen Beispiel mit Ive:

body { 
    background-color: #ffffff; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 200; 
    color: #fff; 
} 


h2 { 
    text-transform: uppercase; 
} 

p { 
    width: 80%; 
    font-size: 14px; 
} 

.rr > div { 
    text-align: left; 
} 

.rr { 
    position: relative; 
    height: 400px; 
    background: #004B5F; 
} 
.rr.rr-left { 
    z-index: 1; 
    float: left; 
    width: 54%; 
} 
.rr.rr-right { 
    z-index: 2; 
    float: right; 
    width: 45.5%; 
    background-image: url('../img/animage.png'); 
    background-repeat:no-repeat; 
    background-color: #004B5F; 
} 

.rr:after, 
.rr:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 0; 
    height: 0; 
} 

.rr-left:after { 
    right: 0px; 
    border-left: 100px solid #004B5F; 
    border-bottom: 400px solid #ffffff; 
} 

.rr-right:before { 
    left: -100px; 
    border-right: 100px solid #004B5F; 
    border-top: 400px solid transparent; 
} 

.rr-left > div { 
    margin-right: 100px; 
    margin-left: 50px; 
} 

.rr-right > div { 
    margin-right: 50px; 
    margin-left: 25px; 
} 

Answer 1

diese Lösung Versuchen

<div class="rr rr-left"> 
    <div> 
     <h2>ABOUT</h2> 
     <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p> 
    </div> 
</div> 
<div class="rr rr-right"> 
</div> 

body { 
    background-color: #ffffff; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 200; 
    color: #fff; 
} 


h2 { 
    text-transform: uppercase; 
} 

p { 
    width: 80%; 
    font-size: 14px; 
} 

.rr > div { 
    text-align: left; 
} 

.rr { 
    position: relative; 
    height: 400px; 
    background: #004B5F; 
} 
.rr.rr-left { 
    z-index: 1; 
    float: left; 
    width: 44%; 
} 
.rr.rr-right { 
    z-index: 2; 
    float: right; 
    width: 56%; 
    background-image: url('http://placehold.it/550x550'); 
    background-repeat:no-repeat; 
    background-color: #004B5F; 
    overflow: hidden; 
} 

.rr:after, 
.rr:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 0; 
    height: 0; 
} 

.rr-right:after { 
    height: 120%; 
    width: 100px; 
    background: #004B5F; 
    transform: rotate(10deg); 
    left: -68px; 
    top: -20px; 
    } 

.rr-left > div { 
    margin-right: 100px; 
    margin-left: 50px; 
} 

.rr-right > div { 
    margin-right: 50px; 
    margin-left: 25px; 
} 

Live-Demo - https://jsfiddle.net/grinmax_/mv1d9a9a/2/

Answer 2

für Wrapper div Bild transform: skewX(-20deg) für die Innenseite der Folie img transform: skewX(20deg)

Answer 3

hinzufügen html wie folgt aus:

<div class="rr-container"> 
     <div class="rr rr-left"> 
      <div class="rr-content"> 
       <h2>ABOUT</h2> 
       <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p> 
      </div> 
     </div> 
     <div class="rr rr-right"> 
     </div> 

Stil hinzufügen wie folgt aus:

body { 
    background-color: #ffffff; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: 200; 
    color: #fff; 
     padding: 0; 
    margin: 0; 
} 


h2 { 
    text-transform: uppercase; 
} 

p { 
    width: 80%; 
    font-size: 14px; 
} 
.rr-container{ background: #607D8B; 
    width: 100%; 
    float: left;} 
.rr-left { 
    position: absolute; 
    display: block; 
    width: 35%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1;  
    background: #607D8B;  
    border-right: 20px solid #607D8B;  
    transform-origin: bottom left; 
    -ms-transform: skew(-30deg, 0deg); 
    -webkit-transform: skew(-30deg, 0deg); 
    transform: skew(-30deg, 0deg); 
} 
.rr-right { 
    width: 65%; 
    height: 100%; 
    padding: 0; 
    font-size: 20px; 
    position: relative; 
    float: right; 
    color: #2E8DEF; 
    background: #333333; 
    border-bottom: 3px solid #2E8DEF; 
} 
.rr-content{ 
    transform-origin: bottom left; 
    -ms-transform: skew(-30deg, 0deg); 
    -webkit-transform: skew(-30deg, 0deg); 
    transform: skew(30deg, 0deg); 
}