CSS 带倒圆角的负三角形

Question

您好，是否可以在矩形的中心创建一个带有倒圆角的三角形，就像在许多着陆页中一样。类似于下图：

我在这里找到了类似的东西，但没有倒圆角 CSS Inverted Triangle image overlay

Answer 1

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

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>

CSS 带倒圆角的负三角形

CSS negative triangle with inverted rounded corner

css

css-shapes

rounded-corners