如何构建对角英雄部分？

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>