嘿，我懂你那种苦恼——试过border-radius和普通的clip-path生成器，愣是做不出想要的翅膀弧形效果对吧？这种自定义的曲线确实得用更精准的方式来搞，给你分享两个实用的方案，你可以根据自己的需求和兼容情况选：

方案一：自定义Clip-Path路径（精准度最高） #

普通的clip-path生成器往往只能做简单的多边形或基础曲线，要实现翅膀这种对称的弧形，得用path()函数来定义自定义路径，它支持贝塞尔曲线，能完美匹配你要的形状。

代码示例： #

<div class="wing-shaped-img">
  <img src="你的图片URL" alt="翅膀风格图片">
</div>

.wing-shaped-img {
  width: 450px; /* 按需调整容器尺寸 */
  height: 320px;
  overflow: hidden;
}

.wing-shaped-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 核心：用path定义翅膀弧形，你可以微调坐标和曲线控制点 */
  clip-path: path('M0,0 C60,-30 165,-30 225,0 C285,-30 390,-30 450,0 L450,320 L0,320 Z');
}

小技巧： #

如果觉得手动写坐标太麻烦，可以先在SVG编辑器里画出你想要的翅膀轮廓，导出路径代码后直接复制到clip-path: path()里，精准度拉满！

方案二：伪元素遮罩（兼容旧浏览器） #

如果需要兼容不支持path()的旧浏览器，可以用伪元素做遮罩层，用border-radius做出弧形，把图片的多余部分挡住。

代码示例： #

<div class="wing-img-mask">
  <img src="你的图片URL" alt="翅膀风格图片">
</div>

.wing-img-mask {
  position: relative;
  width: 450px;
  height: 320px;
  overflow: hidden;
  /* 这里的背景色要和页面背景一致，否则遮罩会露馅 */
  background: #ffffff;
}

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

/* 左右两个伪元素做弧形遮罩 */
.wing-img-mask::before,
.wing-img-mask::after {
  content: "";
  position: absolute;
  top: 0;
  width: 225px;
  height: 100%;
  background: inherit;
  /* 调整border-radius的数值可以改变弧形的弧度和大小 */
  border-radius: 0 0 60% 60% / 0 0 25% 25%;
}

.wing-img-mask::before {
  left: 0;
  transform: translateX(-60%);
}

.wing-img-mask::after {
  right: 0;
  transform: translateX(60%);
}

你可以根据截图里的弧形弧度，慢慢调整代码里的坐标、控制点或者border-radius数值，直到达到你想要的效果~

备注：内容来源于stack exchange，提问作者Vara bl