嘿，我来帮你搞定这个带自定义圆角边角的CSS形状问题！你提到试了border-radius和clip-path但没成功，大概率是写法上没踩对路子，我给你几个靠谱的方案，都能轻松实现你要的效果，还能方便插入图片：

这个方法是最直接的，不需要复杂的路径，适合绝大多数场景。你只需要把图片放在容器里，给容器设置想要的圆角，再加上overflow:hidden就能自动裁剪出圆角边角。

示例代码：

.curv {
  width: 800px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  /* 自定义四个角的圆角：左上、右上、右下、左下，0就是直角 */
  border-radius: 0 0 40px 40px;
  position: relative;
}

.curv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片适配容器，不会变形拉伸 */
}

原理很简单：容器的overflow:hidden会把超出圆角范围的图片部分裁剪掉，图片直接填充容器即可，完全满足你插入图片的需求。

如果你需要的是部分边角圆角+部分边角直角的特殊形状，clip-path可以精准控制，但别用复杂的polygon了，用inset()配合round参数写法更简单不容易错！

inset()的语法是：inset(上偏移 右偏移 下偏移 左偏移 round 左上圆角 右上圆角 右下圆角 左下圆角)，比如你想要左上、右上是直角，右下、左下是圆角的形状：

.curv {
  width: 800px;
  height: 200px;
  margin: 0 auto;
  /* 四个圆角分别对应：左上、右上、右下、左下，0就是直角 */
  clip-path: inset(0 0 0 0 round 0 0 40px 40px);
  position: relative;
}

.curv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

你之前的clip-path代码没写完，应该是用了polygon导致路径出错，用这种inset+round的写法，几分钟就能搞定自定义边角。

如果你的形状需要渐变圆角或者更特殊的效果，可以用CSS mask，不过兼容性稍差（需要现代浏览器支持）：

.curv {
  width: 800px;
  height: 200px;
  margin: 0 auto;
  /* 用径向渐变创建透明圆角区域，mask会保留黑色部分 */
  -webkit-mask-image: radial-gradient(circle at bottom left, transparent 40px, black 41px),
                      radial-gradient(circle at bottom right, transparent 40px, black 41px);
  mask-image: radial-gradient(circle at bottom left, transparent 40px, black 41px),
              radial-gradient(circle at bottom right, transparent 40px, black 41px);
  -webkit-mask-size: 50% 100%;
  mask-size: 50% 100%;
  -webkit-mask-position: left, right;
  mask-position: left, right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
}

.curv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这个方法适合需要更灵活的形状，但一般前两个方案就足够满足需求了。

另外提一句：你之前用了:before伪元素，其实没必要这么麻烦，直接给容器加样式，把图片放在容器里就行，这样更直观好维护。

内容的提问来源于stack exchange，提问作者che