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-container使用44.9％和45.1％，看起来很平滑。

通过更多的工作和适当大小的图像，您可以使用其中的一些技术来构建纯CSS所需要的设计，而无需复杂的变换或不适合视口的图像。对于现代浏览器而言，这种支持还不错，缺少支持的浏览器将忽略剪切路径而退回到固定块，我真的认为这比通过复杂的解决方案来获得美观效果或提高效果要好。呈现旧版本浏览器的需求。

Answer 2

如何制作一个旋转的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>

如何实现设计的“切入”？

2 个答案: