在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;
}

另请参阅fiddle

Answer 1

使用CSS Gradients + Transforms：

在顶部使用响应式剪切来实现此形状的一种方法是使用两个偏斜的伪元素，仅将背景添加到伪元素而不是父元素。

因为，伪元素是其父元素宽度的一半，所以父元素所需的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剪辑路径：（浏览器支持不佳）

另一种方法是使用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剪辑路径的限制（即，如果尺寸发生变化，切割深度会增加，因为这些值是父容器大小的分数而不是固定长度）。