htmlで対角線で画像とテキストを分割する方法は？

Question

HTMLで画像とテキストを分割するときに問題があります。

################################# 
# __________________________ # 
# |   |    | # 
# |   |    | # 
# | text |  IMAGE | # 
# |  |     | # 
# |_______|__________________| # 
#        # 
################################# 

このような私のコード：

<div class="container" style="height: 600px;"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam repellat, rem possimus porro quisquam.</p> 
     </div> 
     <div class="col-md-6"> 
      <img src="" alt=""> 
     </div> 
    </div> 
</div> 

は、テキストやイメージを作成します。 しかし、このように描く方法はわかりません。

あなたはここで本当の画像を見ることができます：

Answer 1

あなたはこの結果を達成するためにclip-pathと一緒にプロパティshape-outsideを使用することができます。

• shape-outside browser support
• clip-path browser support

：

body, 
 
h2 { 
 
    margin: 0; 
 
} 
 
.main { 
 
    height: 100vh; 
 
} 
 
.img-container { 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: lightgray; 
 
    float: right; 
 
    background: url(http://fillmurray.com/1000/1000) no-repeat center center/cover; 
 
    -webkit-shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%); 
 
    shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%); 
 
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); 
 
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); 
 
}

<div class="main"> 
 
    <div class="img-container"></div> 
 
    <h2>Title</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque orci id elit mollis luctus. Integer tincidunt euismod lectus sodales convallis. Pellentesque bibendum libero turpis, ac hendrerit ante maximus et. Cras interdum tortor id metus 
 
    hendrerit volutpat. 
 
    </p> 
 
</div>

---

サポートはとてもこれらのプロパティをサポートするブラウザを確認することを確認してその素晴らしいではありません

---

このtoolを使用して、polygon() CSS機能のさまざまな値を生成できます。