如何裁剪背景图像

Question

我正在尝试使用自定义表单裁剪背景图片..但我已经堆叠了。

目标是裁剪图片如下：

想想每一步都是不同的html页面（page-1.html，page-2.html，page-3.html）。

在页面1.html 背景中非常简单。重要的想法承认 - 这些图片必须有回应。

page-1.html

background-image: url(image-1.jpg) no-repeat 50% 0;
background-size: cover;

可以使用<svg>元素完成第二个示例。 page-2.html

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200" viewBox="0 0 100 102" preserveAspectRatio="none" class="triangle-svg">
    <path d="M0 100 L50 0 L100 100 Z"></path>
</svg>

<style>
    .triangle-svg {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 999;
        fill: #fff;
    }
</style>

但是第三个例子呢？我不知道如何处理它。 在3个例子中我们看到类似的东西：

<div class='top-layout'></div>
<div class='bottom-layout'></div>

.top-layout图像应该被破坏。 <svg>决定很糟糕，因为我们应该能够将第二张图片放在第一张图片上。

.top-layout {
   height: 500px;
}
.bottom-layout {
   height: 500px;
   position: relative;
   top: -150px;
}

所有这些东西应该以{{1​​}}效果响应。

如果有人可以解决这个问题？感谢

Answer 1

@phrogz得到所有的积分，因为他先回答。

clip-path, mask and gradient的演示。对于您的解决方案，请使用您自己的<g clip-path="url(#clip-bottom)" > ... </g>替换组<image .... clip-path="url(#clip-bottom)" />的内容。通常我会使用g创建一个clip-path roup，以保持image标记更清晰，但这是我自己的偏好。