如何使用剪切路径属性获得清晰的边框

Question

我的图像的底角如下：

我已经尝试过边界半径，但似乎只能创建光滑的角。

如何使用clip-path属性或任何其他CSS技术实现这些“尖锐的底角”效果？

Answer 1

您需要使用::after和::before来查看此链接：https://css-tricks.com/the-shapes-of-css/ 制作像这样的形状并将它们放在您的背景图片上。 正如我在您的图像上发现的那样，您的标签是白色的，因此当您将形状的颜色涂成白色时，它们将是不可见的，并且您也可以做角落或其他操作。

Answer 2

我认为您可以使用border-radius绘制清晰的边框。

#sharp-img {
  border-radius: 0% 0% 31% 33% / 0% 0% 16% 17%;
}

<img id="sharp-img" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"  width="500" alt="technology" />

在Fancy Border Radius Generator上可以看到更多的图像。