如何实现一侧边缘贴合图片轮廓的DIV？是否可行？

你的需求完全可行，针对这种贴合自定义图片轮廓的场景，以下几种方法比普通的CSS曲线边缘方案更精准：

1. CSS clip-path 裁剪（推荐） #

这是实现自定义轮廓最直接的方式，通过定义裁剪路径让DIV的边缘完全贴合图片轮廓。你可以用在线工具（基于图片提取轮廓的路径生成器）把图片的轮廓转换成clip-path支持的路径值，比如polygon()或者path()。

示例代码：

.custom-shape-div {
  width: 300px;
  height: 400px;
  background: #your-color;
  /* 替换成从图片提取的轮廓坐标 */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 100%, 0 100%);
}

优点：无需额外资源，代码简洁，现代浏览器兼容性良好。

2. SVG 蒙版（适合复杂轮廓） #

如果图片的轮廓非常复杂（比如不规则的曲线、细节多的形状），用SVG蒙版能达到更高的精准度。步骤如下：

• 把图片的轮廓导出为SVG路径（可用PS、Figma等工具提取）；
• 用SVG的<mask>元素定义蒙版区域；
• 给目标DIV应用这个蒙版。

示例代码：

<svg width="0" height="0">
  <defs>
    <mask id="image-shape-mask">
      <!-- 替换成你的图片轮廓SVG路径 -->
      <path d="M0 0 L300 0 L300 320 L210 400 L0 400 Z" fill="#fff"/>
    </mask>
  </defs>
</svg>

<div class="masked-div" style="width:300px; height:400px; background:#your-color; mask: url(#image-shape-mask); -webkit-mask: url(#image-shape-mask);"></div>

优点：对复杂轮廓的还原度极高，支持各种精细形状。

3. 背景图叠加法（简单纯色场景） #

如果你的DIV是纯色填充，可以直接制作一张和原图片轮廓一致的透明PNG图，将其作为DIV的背景，和原图片精准对齐。

示例代码：

.custom-div {
  width: 300px;
  height: 400px;
  background: url('your-shape-bg.png') no-repeat center/cover;
  /* 配合定位和原图片对齐 */
  position: absolute;
  left: 0;
  top: 0;
}

优点：实现成本低，适合快速验证效果。

你之前找到的CSS曲线边缘方案只适用于规则的圆弧/曲线，无法适配图片的自定义不规则轮廓，所以需要用上面这些针对性的方法。

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