带倒圆角的 CSS 负三角形答案

【问题标题】：CSS negative triangle with inverted rounded corner带倒圆角的 CSS 负三角形
【发布时间】：2016-08-09 22:28:04
【问题描述】：

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

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

【问题讨论】：

【解决方案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;
}

&lt;div class='shape'&gt;This is a shape.&lt;/div&gt;

【讨论】：

哇，谢谢你！可以在该div中添加文本吗？我在这里试试jsfiddle.net/nhqKb/284 三角形很棒，但没有显示文字
@Harry，该死的...快如闪电 XD
对不起，我粘贴了错误的链接是另一个没有圆角的箭头，我在 60 秒后编辑，你更快:)
嘿嘿嘿，但没有哈利快：p
@JoTaRo：是的，可以。请检查更新的答案。