我有一个心的图像，这是正方形的图像，我希望文本环绕在一个心形/图案，使它紧紧拥抱图像中的心.我认为问题是心形的(我希望文本在一侧环绕)，图像本身是正方形的，所以当我使用border-radius: 35%;和shape-outside: margin-box;时，文本围绕图像绕成一个圆圈，而不是图像中的心或心形图案.(很难解释，但基本上我希望它看起来很专业，文字勾勒出内心，而不是图像.)
可能的解决方案:修改图像，使其更像心形，但我经常使用这个图像，所以我不想这样做，因为它可能会搞砸其他一些东西.
这是它现在在这个网站顶部的样子:confluenceinfinite.org.不可怕，但对我来说不够专业，文字在右边勾勒出一个圆圈，而不是一个心形.我想如果它紧一点的话看起来会酷很多.
我遗漏了什么？
* {
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;
}<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/markup专家.