我正在尝试构建具有圆角和背景图像的以下元素：

我最初使用了：后伪元素作为三角形，但我无法让背景图像“渗入”它，因为它在技术上是一个单独的元素。

我决定使用clip-path来获得正确的形状和背景功能。然而，因为元素的底部是三角形的终点，所以边框半径只影响顶角。

这就是我目前所处的位置：

.service_item{
    min-height:100px;
    background: var(--color-yellow);
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), 40% calc(100% - 20px), 30% 100%, 20% calc(100% - 20px), 0 calc(100% - 20px));
    max-width:300px;
    border-radius: var(--border-radius-card);
    background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
    background-size:cover;
    background-position:center;
    min-height:300px;
 }

有没有一种方法可以使用剪辑路径多边形来弯曲角落，或者有没有一种方法可以构建这个我没有看到的？

谢谢你的帮忙