html - 如何在设计中实现 'cut'？

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

如果我对您的理解正确，您想要实现诸如具有不同图像和背景颜色的多 Angular 切割之类的效果。您可以使用类似以下的方法来执行此操作，根据您的需要对其进行定制，并通过实验交换不同的解决方案，但使用相同的基本工具。

这些工具主要包括:

• > clip-path , &
• > linear-gradient

此解决方案将提供接近效果的匹配，但会适应用户的视口(viewport)。但在调整过程中，请注意 Angular 必然会发生变化(但它应该感觉自然且流畅，不像固定图像会随着视口(viewport)变化而缩放且感觉不自然)。

剪辑路径可用于为元素赋予形状，虽然“绘制”所需形状的逻辑可能很棘手，但 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>

Clip-path 在这里用来制作一个多边形，数字对表示 Angular 的位置。每对对应于形状中的 Angular 数，因此一个是梯形，另一个本质上是一个 M 形的奇数五边形。

中间位是通过背景图像上的硬线性渐变实现的。这一切都是通过从 Unsplash API 中提取的随机图像完成的，但是您可以对背景位置做一些事情，例如，使用您正在处理的任何图像以适当的大小，并消除这个粗略演示中的大带宽问题。

最后，请注意，对于具有锐利切割的成 Angular 线性渐变，大多数显示器会产生锯齿状边缘。要实现抗锯齿和平滑边缘的外观，请使用接近但不精确的值。这里，.cut-container使用了 44.9% 和 45.1%，看起来很平滑。

通过更多的工作和适当大小的图像，您可以使用这些技术中的一些来使用纯 CSS 构建您想要的那种设计，而无需复杂的转换或不适应视口(viewport)的图像。现代浏览器对此的支持还不错，那些缺乏支持的人会忽略剪辑路径并退回到实心 block ，我真的相信这比通过复杂的解决方案来获得装饰效果要好，或者制作高旧浏览器的渲染需求。