我正在尝试实现以下设计： https://i.stack.imgur.com/zN2nY.jpg
我的问题是我不想使用 png 图像，因为它太大了。有没有另一种方法可以实现剪切图像效果？
我正在为左侧蓝色部分使用 SVG 文件。这就是我迄今为止取得的成就：https://i.stack.imgur.com/iGt6T.jpg
这是我的 HTML：
<section class="section">
<div class="section-mask">
SVG FILE
</div>
<div class="container-full">
<div class="row">
<div class="col-lg-6 column-text">
<h2 class="title">
Section Title
</h2>
<div class="paragraph">
Section Content
</div>
</div>
<div class="col-lg-6 column">
Section Widget
</div>
</div>
</div>
</section>
如果我理解正确的话，您希望实现具有不同图像和背景颜色的多个角度切割。您可以使用如下所示的内容来执行此操作，根据您的需求对其进行定制，并通过试验交换不同的解决方案，但使用相同的基本工具。
这些工具主要包括：
clip-path， &linear-gradient
此解决方案将提供与效果的紧密匹配，但适应用户视口。但在适应时，请注意角度必然会发生变化(但它应该感觉自然和流畅，不像固定图像会随着视口的变化而缩放和感觉不自然)。
剪辑路径可用于为元素提供形状，虽然"绘制"所需形状的逻辑可能很棘手，但Bennett Feely有一个名为Clippy的出色工具来计算代码。
这是CodePen上的"剪切设计"演示，我还将在此处包含工作代码，并简要说明。
编写 HTML 时假定这是页面标题的可视化处理的一部分，但会根据需要进行调整。CSS是一个快速而脏的模型，其剪辑路径的排列方式使数字对易于扫描和调整，一目了然：
header {
background-image: url(//unsplash.it/1600x900);
background-size: cover;
}
.cut-container {
background-image: linear-gradient(80deg, hsla(180, 100%, 40%, .5) 44.9%, white 45.1%);
}
.cut {
background: url(//unsplash.it/1600x600) center center;
background-size: cover;
clip-path: polygon(
0 0,
100% 0,
100% 70%,
0 100%
);
height: 20em;
}
.cut2 {
background: hsl(220,50%,30%);
clip-path: polygon(
50% 95%,
100% 25%,
100% 100%,
0 100%,
0 25%);
height: 15em;
}<header>
<div class="cut-container">
<div class="cut"></div>
<div class="cut2"></div>
</div>
</header>剪切路径在这里用于制作多边形，数字对指示角的位置。每对对应于形状中的角度数，因此一个是梯形，另一个本质上是M形的奇数五边形。
中间位是通过背景图像上的硬线性渐变实现的。这一切都是通过从Unsplash API绘制的随机图像完成的，但是例如，您可以使用背景位置做一些事情，并以适当的大小使用您正在使用的任何图像，并消除此粗略演示中的大带宽问题。
最后，请注意，对于具有锐利切割的角度线性渐变，大多数显示器会产生锯齿状边缘。若要实现消除锯齿和平滑边缘的外观，请使用接近但不精确的值。在这里，.cut-container使用了 44.9% 和 45.1%，看起来很流畅。
通过更多的工作和适当大小的图像，您可以使用其中一些技术来构建您想要的纯CSS设计，而无需复杂的转换或不适应视口的图像。对于现代浏览器来说，支持还不错，那些缺乏支持的人会忽略剪辑路径并回退到实心块，我真的相信这比通过复杂的解决方案来获得外观效果或对旧浏览器提出高渲染要求要好。
制作一个旋转的 css 块，在保持低于 svg 的同时覆盖图像怎么样？
body {
overflow-x: hidden;
}
.image {
background: grey;
width: 100%;
height: 100px;
}
.cut {
border: 1px solid red;
width: 200%;
height: 150px;
transform: rotate(-5deg);
background: white;
padding: 50px;
transform-origin: 0% 50%;
position: absolute;
}
.svg {
border: 1px solid green;
position: relative;
z-index: 1;
}<div class="image">This would be the image</div>
<div class="cut">This is the CSS block</div>
<div class="svg">This would be the SVG</div>