在CSS中响应式地绘制图形

Question

我有一个带有轻微曲线的'div'。 我尝试使用边框并成功实现了。 但我的担心是它不是响应式的。 如何使其响应式？ 有任何想法吗？ 这是我尝试过的代码，请看一下。

<div></div>

div {
    position:relative;
    width:100%;
    float:left;
    background:green;
    height:80px;
    overflow:hidden
  }
div:before {
    position: absolute;
    content: '';
    left: 0;
    right: 50%;
    border: 298px solid transparent;
    top: 0;
    border-top: 13px solid #fff;
}

同时参考这个示例

- Santhosh Kumar

---

你所说的“响应式”是指顶部的切口在div中心始终达到最大深度，并且在左/右侧为零深度吗？此外，元素的背景是什么？它总是纯色的（还是）有渐变/图像填充？ - Harry

你是对的。尝试调整窗口大小，因为边框有固定的宽度，所以它没有完全贴合父元素的边缘。是否有任何解决方法可以使其保持相同的大小，即使浏览器被调整大小。当然，它将具有渐变填充... - Santhosh Kumar

在你的例子中，剪切区域是白色的吗？那个区域可以是纯色的吗，还是必须显示页面的背景（我的意思是说，它应该是透明的剪切）？ - Harry

为了演示目的，我将其设置为白色。实际上它将是一个渐变。 - Santhosh Kumar

根据您实际需要的内容，创建形状的方式可能会有所不同。无论如何，我将尝试为您提供透明剪切的解决方案。 - Harry

@Harry，我已经添加了这张图片...需要把它切割得和这个一模一样。 - Santhosh Kumar

Answer 1

使用CSS渐变+转换：

实现具有响应性的顶部切割形状的一种方法是使用两个倾斜的伪元素，并将背景添加到伪元素而不是父元素。

由于伪元素的宽度为其父元素宽度的一半，因此必须将所需在父元素上使用的linear-gradient填充分成两半并分配给2个伪元素。

这种方法的一个潜在缺点是，如果父div的高度增加，则切割的深度也会增加。

.shape {
  position: relative;
  height: 100px;
  width: 100%;
  overflow: hidden;
}
.shape:after,
.shape:before {
  position: absolute;
  content: '';
  height: 100%;
  width: calc(50% + 1px);
  top: 0;
  backface-visibility: hidden;
}
.shape:before {
  left: 0;
  background-image: linear-gradient(to right, red, gold);
  transform: skewY(2deg);
  transform-origin: left top;
}
.shape:after {
  right: 0;
  background-image: linear-gradient(to right, gold, crimson);
  transform: skewY(-2deg);
  transform-origin: right top;
}
body {
  background-image: radial-gradient(circle at center, sandybrown, chocolate);
  min-height: 100vh;
}

<div class='shape'></div>

使用CSS Clip-path：（浏览器支持不好）

另一种方法是利用CSS的clip-path。在我的意见中，这将是完美的选择，因为不需要渐变处理（如分成一半），即使div的高度增加，切割的深度也不会改变。但不幸的是，它的浏览器支持不好。

.shape {
  height: 100px;
  width: 100%;
  -webkit-clip-path: polygon(0px 0px, 50% 14px, 100% 0%, 100% 100%, 0% 100%);
  background-image: linear-gradient(to right, red, gold, crimson);
}
body {
  background-image: radial-gradient(circle at center, sandybrown, chocolate);
  min-height: 100vh;
}

<div class='shape'></div>

使用SVG剪切路径：（浏览器支持更好）

另一种方法是利用SVG的clip-path。它比CSS剪切路径具有更好的浏览器支持，但不幸的是，这里切割的深度会随着尺寸的变化而改变。

.shape {
  height: 100px;
  width: 100%;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
  background-image: linear-gradient(to right, red, gold, crimson);
}
body {
  background-image: radial-gradient(circle at center, sandybrown, chocolate);
  min-height: 100vh;
}

<svg width="0" height="0" viewBox="0 0 200 200">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0 0.5,0.07 1,0 1,1 0,1z" />
    </clipPath>
  </defs>
</svg>
<div class='shape'></div>

或者，我们可以使用一个SVG path 或 polygon 元素（而不是clip-path）来完成同样的操作，并将其绝对定位于父容器内部，但它将具有与SVG clip-path相同的限制（即，如果尺寸发生变化，切割深度将增加，因为值是以父容器尺寸的分数而不是固定长度表示）。

- Harry