如何创建带有圆角和缩进右下角的 SVG 形状

Question

我需要帮助为我的 UI 设计创建特定的 SVG 形状，但我很难仅使用 CSS 或 SVG 路径代码来实现它。

这就是我要找的：

带有圆角的矩形。 右下角应该有一个凹痕，几乎像圆形切口或向内的曲线，而不是标准的圆形边缘。 理想情况下，我想在此形状内应用模糊或背景滤镜，这样它仅影响形状内的区域，而不模糊整个容器。

有人可以帮我创建一个实现这种效果的 SVG 路径吗？或者建议一种在特定 SVG 形状内应用背景滤镜的方法？任何建议或例子将不胜感激！

提前谢谢您！

我尝试过使用CSS border-radius 和clip-path，但似乎无法获得我想要的确切的缩进角效果。我还尝试了 SVG，但我尝试使用路径命令并没有产生所需的形状。

Answer 1

使用 SVG 路径（请参见此处） :

m 0 0 h 180 a 20 20 0 0 1 20 20 v 150 a 5 5 0 0 1 -5 5 h -25 a 20 20 0 0 0 -20 20 v 25 a 5 5 0 0 1 -5 5 h -220 a 20 20 0 0 1 -20 -20 v -185 a 20 20 0 0 1 20 -20 z