css – 带有缩进圆的线

我想知道这个带有缩进圆圈的心是如何实现的.如何让曲线像这样？ 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

原文地址：https://www.jb51.cc/css/216162.html