我想知道这个带有缩进圆圈的心形是如何实现的。我怎样才能使曲线像这样?可以用 CSS、HTML 实现吗?
我知道如何用 CSS 甚至图像来实现一颗心,但是 flex 的边框超出了我的知识范围。
border-radius
在这种情况下似乎不是解决方案。
最佳答案
这里是关于如何使用内联 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
关于css - 带缩进圆的线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30506134/