如何构建对角英雄部分？

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>

如何构建对角英雄部分？

How to build a diagonal hero section?

html

css

responsive-design