如何在设计中实现“切割”？

Question

我正在努力实现以下设计：https://imgur.com/a/iXhOTfR

我的问题是我不想使用png图像，因为它太大了。有没有其他方法来实现切割图像效果？

我正在使用左侧蓝色部分的SVG文件。这是我到目前为止所取得的成就：https://imgur.com/a/bZSjOUH

这是我的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>

Answer 1

如果我理解正确，你想要实现多种角度切割，具有不同的图像和背景颜色。您可以使用以下内容执行此操作，根据您的需要进行定制，并通过实验交换不同的解决方案，但使用相同的基本工具。

这些工具主要包括：

• clip-path，＆
• linear-gradient

此解决方案将提供与效果的紧密匹配，但适应用户视口。但是在适应时，要注意角度必然会发生变化（但它应该感觉自然流畅，不像固定的图像随着视口的变化而缩放并感觉不自然）。

剪辑路径可用于赋予元素形状，而“绘制”所需形状的逻辑可能很棘手，Bennett Feely有a great tool called Clippy来编制代码。

这是'cut design' demo on 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-containeruses 44.9％和45.1％，看起来很顺利。

通过更多的工作和适当大小的图像，您可以使用其中一些技术来构建您使用纯CSS并且没有复杂变换或不适应视口的图像的设计。对于现代浏览器来说支持并不差，而那些缺乏支持的人会忽略剪辑路径并回归到固体块，我真的相信这比通过复杂的解决方案获得美容效果更好，或者更高渲染旧版浏览器的需求。

Answer 2

如何在保持低于svg的同时制作覆盖图像的旋转css块？

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>