css - 带缩进圆的线

Question

我想知道这个带有缩进圆圈的心形是如何实现的。我怎样才能使曲线像这样？可以用 CSS、HTML 实现吗？

我知道如何用 CSS 甚至图像来实现一颗心，但是 flex 的边框超出了我的知识范围。

border-radius 在这种情况下似乎不是解决方案。

Answer 1

这里是关于如何使用内联 svg 实现此布局的想法。

在 SVG 中:

• 第一条路径是带有缩进圆圈的线。缩进的圆是用圆弧命令创建的
• 第二个路径元素是心形轮廓。它对心脏的顶部使用贝塞尔曲线命令。

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