CSSを使ってdivレイアウトをスキップし、斜めに塗りつぶす方法を教えてください

Question

私はこの1日中苦労しています。

私たちのデザイナーは、ページを横切るパネルが歪んだデザインを思いつきました。片側にテキストがあり、もう一方にイメージがあります。

しかし、彼は左の下にあるように見える領域を塗りつぶすために右の画像を望んでいるため、上の左のパネルが画像の上に重なるように見えます。

あなたのための

例：

HTMLは、この段階ではかなり基本的である：

：

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

そして、ここでは、アイブ氏は、ここに別の例で使用されてCSSです

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

内のimgのために、このソリューションをお試しください

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

ライブデモ - https://jsfiddle.net/grinmax_/mv1d9a9a/2/

Answer 2

ラッパーdiv画像transform: skewX(-20deg) ラッパーtransform: skewX(20deg)

Answer 3

は、このようなHTMLを追加します。

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

は次のようにスタイルを追加します。

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