如何用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

你可以沿着使用属性shape-outside与clip-path实现这一结果。

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>

---

支持不是很大所以一定要检查是否支持这些特性的浏览器：

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

---

您可以使用此tool为polygon() CSS函数生成不同的值。