CSS负三角形，倒圆角

Question

您好可以在矩形的中心创建一个倒圆角的三角形，就像在许多着陆页中一样。如下图所示：

我发现这里有类似的东西，但没有倒圆角 CSS Inverted Triangle image overlay

Answer 1

是的，可以通过使用两个伪元素来实现这种效果。我们需要相对于容器的左侧定位一个伪元素，而另一个相对于容器的右侧定位。然后通过在相反方向上添加transform: skew()并为所需边指定边界半径，我们可以获得所需的输出。

div {
  position: relative;
  height: 50px;
  width: 100%;
  padding-top: 50px;
  background: blue;
  background-clip: content-box;
  /* make sure blue background doesn't appear behind triangle */
  overflow: hidden;
  color: white;
}
div:before,
div:after {
  position: absolute;
  content: '';
  top: 0;
  width: calc(50% + 10px);
  /* don't change */
  height: 50px;
  /* must be equal to padding-top */
  background: blue;
}
div:before {
  left: 0;
  transform: skew(45deg);
  transform-origin: right bottom;
  border-top-right-radius: 12px;
}
div:after {
  right: 0;
  transform: skew(-45deg);
  transform-origin: left bottom;
  border-top-left-radius: 12px;
}

<div class='shape'>This is a shape.</div>