我想知道这个带有缩进圆圈的心是如何实现的.如何让曲线像这样？ CSS,HTML有可能吗？
我知道如何使用CSS甚至是图像来实现心脏,但弯曲的边框是我所不知道的.
在这种情况下,border-radius似乎不是解决方案.
解决方法
以下是如何使用内联svg实现此布局的想法.
在SVG中：
>第一条路径是带有缩进圆的线.使用arc命令创建缩进圆
>第二个路径元素是心脏轮廓.它使用贝塞尔曲线命令作为心脏的顶部.
img {
width: 100%;
display: block;
}
div {
position: relative;
height: 100px;
background: #fff;
}
svg {
position: absolute;
bottom: 100%;
width: 100%;
}
<img src="http://lorempixel.com/640/200" alt=""> <div> <svg viewBox="0 0 100 18.4"> <path stroke="orange" stroke-width="0.8" fill="#fff" d="M-1 21 V18 H79.5 A7 7 0 1 1 90.5 18 H101 V21" /> <path stroke="orange" stroke-width="0.8" fill="#fff" d="M85 18 L81 13 C80 10 85 10 85 12 C85 10 90 10 89 13z " /> </svg> </div>
有关SVG中路径命令的更多信息,请参见MDN
