Html 如何建立一个对角线英雄节？

我正试图找到一个最好的方法来为网页上的英雄部分建立一个布局，它是一半内容，一半图像，用一条对角线分开；大概是这样的：

我一直在读关于使用SVG、

剪辑路径

之类的东西，但我真的不知道如何使用它们；或者，如果用响应式设计很容易处理这些问题，因为基本上我需要图像的形状，因为它是由用户提供的，所以我不能像那样插入已经剪裁好的图像

我想到的基本结构是：

<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%的宽度，但我需要实际分离两个部分，如上图，有什么想法或方向吗？

第一步是为图像生成剪裁形状，我使用了，它可以让您生成自定义形状

创建一个直角三角形以设置将图像设置为背景的

的形状

.英雄形象{
宽度：100%；
身高：100%；
背景图像：url（'http://placehold.it/1920x1080');
背景位置：中心；
-webkit剪辑路径：多边形（0,100%0,100%100%）；
剪辑路径：多边形（0,100%0,100%100%）；
}

.hero容器{
高度：100vh；
宽度：100%；
保证金：0；
填充：0；
}
.英雄形象{
宽度：100%；
身高：100%；
背景图像：url（'http://placehold.it/1920x1080');
背景位置：中心；
-webkit剪辑路径：多边形（0,100%0,100%100%）；
剪辑路径：多边形（0,100%0,100%100%）；
}
.英雄文本{
位置：绝对位置；
最高：50%；
左：10%；
}
h1{
字体系列：无衬线；
字号：4rem；
}

你好，世界
这是占位符的一些文本

点击我

可能重复的：也相关：谢谢，将检查两个问题Y，是的，看起来非常好，只需要确保没有水平滚动，但这太棒了，谢谢。。。你能对你所做的做一点解释吗？@IvanS95这样你就不想让文字跟在形状后面了？如果是这样的话，那么我把问题联系起来就容易多了（一个简单的背景就可以了it@IvanS95，有一个很好的网站可以让你生成自定义形状，我会在答案中添加更多的描述。@Temaniaf你是什么意思？我确实需要内容粘贴到屏幕的一半，那一半没有背景image@IvanS95我想（就像我分享的例子）如果你想让文本符合三角形的形状，也许可以看看我分享的例子，你就会明白我的意思……但似乎你不想要这个