CSS负三角形,倒圆角

Question

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

我在这里找到了类似的东西,但没有倒圆角 CSS倒三角形图像叠加

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>