如何建立对角英雄区？

Question

我正在尝试找到一种最好的方法来为网页上的英雄区域构建布局，该区域内容一半，图像一半，并用对角线分开；像这样的东西：

我一直在阅读有关使用SVG，clip-path以及类似内容的信息，但是我不确定如何使用它们。还是那些响应式设计易于处理，因为基本上我需要使图像具有这种形状，因为它是由用户提供的，所以并不是像我只能插入已经被剪切过的图像。

我正在考虑的基本结构如下：

<div class="hero">
    <div class="hero-image">
        <img src="" alt="">
    </div>
    <div class="hero-content">
        <img src="" alt="">
        <h4>Title</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum non id saepe quae praesentium exercitationem omnis ratione nulla optio, tempore repellendus maxime veritatis molestiae. Laudantium quisquam illum atque excepturi expedita.</p>
    </div>
</div>

我可以将屏幕划分为50％的宽度，但是我实际上需要将上面的图片，任何想法或方向这两个部分分开吗？

Answer 1

第一步是为图像生成剪切形状，我使用了https://bennettfeely.com/clippy/，它可以让您生成自定义形状。

创建一个直角三角形以设置<div>的形状，该形状会将图像设置为其背景。

.hero-image{ width:100%; height:100%; background-image: url('http://placehold.it/1920x1080'); background-position: center; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); }

.hero-container{
  height:100vh;
  width:100%;
  margin:0;
  padding:0;
}
.hero-image{
  width:100%;
  height:100%;
  background-image: url('http://placehold.it/1920x1080');
  background-position: center;
  
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.hero-text{
  position: absolute;
  top:50%;
  left:10%;
}
h1{
  font-family: sans-serif;
  font-size: 4rem;
}

<div class="hero-container">
  <div class="hero-image">
  </div>
  <div class="hero-text">
    <h1>Hello World</h1>
    <p>This is some text for the placeholder</p>
    <button>click me</button>
  </div>
</div>