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>