如何让文本贴合心形而非方形图片进行环绕排版？

我有一张方形的心形图片，希望文本能以心形样式环绕在图片中的心形周围，紧密贴合心形轮廓。目前使用border-radius: 35%;和shape-outside: margin-box;时，文本会围绕图片形成圆形环绕，而非贴合心形。我不想修改这张常用图片，避免影响其他场景的使用。当前效果是文本右侧呈现圆形环绕，不够贴合心形，不够专业。

附上当前使用的代码：

CSS 代码 #

* {
  padding: 0;
  box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: margin-box;
}

HTML 代码 #

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

我并非CSS/HTML领域专家，请问遗漏了什么？

你当前的问题在于shape-outside: margin-box只会基于元素的外边距盒子生成环绕形状，搭配border-radius:35%只能得到近似圆形的效果，完全没法贴合心形轮廓。要实现紧密贴合的文本环绕，需要用shape-outside的高级特性来定义精确的形状，且无需修改原图片。

方法1：利用图片透明通道自动识别形状（推荐） #

如果你的心形图片带有透明背景，直接用shape-outside: url(图片地址)就能让浏览器自动识别图片的非透明区域作为文本环绕边界，再通过shape-image-threshold调整透明度阈值优化识别效果。

修改后的目标元素CSS：

#black_heart_globe_top {
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left;
  /* 基于图片非透明区域定义环绕形状 */
  shape-outside: url('https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png');
  /* 调整透明度阈值，0为完全透明，1为完全不透明，按需微调 */
  shape-image-threshold: 0.5;
  /* 移除之前的border-radius，避免干扰形状识别 */
  border-radius: 0;
}

方法2：自定义SVG路径实现精准心形环绕 #

如果图片透明通道识别效果不佳，可以手动编写心形SVG路径，用shape-outside: path()定义形状，这种方式可控性更强。

示例CSS代码（需根据图片尺寸调整路径坐标）：

#black_heart_globe_top {
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left;
  /* 自定义心形路径，坐标需匹配你的图片实际尺寸 */
  shape-outside: path('M50,10 C70,10 90,30 90,50 C90,70 70,90 50,100 C30,90 10,70 10,50 C10,30 30,10 50,10 Z');
  /* 可选：设置形状与文本的间距 */
  shape-margin: 10px;
  border-radius: 0;
}

注意：path()内的坐标需要根据你的图片实际宽高调整，确保路径完全贴合心形轮廓。

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