带缩进圆的线

Question

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

我知道如何用 CSS 甚至图像实现一颗心，但我不知道弯曲的边框。

在这种情况下，

border-radius 似乎不是解决方案。

Answer 1

您可以使用 CSS 使用 border-radius 属性:

实现圆形

element {
border-radius: 999px;
border: 5px solid #000; // thick border
}

编辑

抱歉，过早地回答了这个问题。如果您不想使用图像解决此问题，我可以想到一个解决方法。

下橙色边框可以是 <div>，高度为 1px 或 2px，宽度为 100%。心脏元素可以是另一个 div，样式如我上面解释的那样。接下来，您只需要对心脏施加比 <div> 更高的 z-index（连同 position: relative）。并且您需要对 <div> 应用一些负数 margin-top 直到它重叠。

只是一个想法，也许它能带你到某个地方。

Answer 2

最简单、最安全和跨浏览器的解决方案是使用图像。

其他方式：canvas、border-radius、transform 或 SVG。

Answer 3

如果你真的想用css来做，你可以尝试一些图像到css的网络服务（比如http://image2css.alexdoesit.com/ - 只是第一个出现在 google)

不过，最简单干净的方法是使用透明图像。

至于在 CSS3 中实现圆弧，这个答案可能会有所帮助：How to make arc shapes with CSS3?

Answer 4

因此，解决您的问题的最佳方法是使用 SVG 形状 like this，或自定义字体，因为您可以修改颜色，并且它们可以很好地适应视网膜等

通常 CSS3 非常适合创建基本形状，但是当涉及到轮廓形状时，它有点落空了。这是因为它们通常依赖于使用前后选择器创建多个形状。这通常有效，但如果您想应用边框，则会导致形状重叠问题。

唯一真正的 css 解决方案是创建第二个稍微小一点的心形作为面具。但这是分配的标记膨胀，所以 SVG 确实是您的最佳选择。

这里有一个快速而肮脏的例子，重叠的心 https://jsfiddle.net/6qywoxsk/

.heart {
    position: absolute;
    width: 100px;
    height: 90px;
}
.heartCon{
    position:relative;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
.heart2{
     -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari */
    transform: scale(0.9);
}
.heart2:before,
.heart2:after {
     background:#fff;   
     top: 0px;
}

<div class="heartCon">
  <div class="heart"></div>
  <div class="heart heart2"></div>
</div>

Answer 5

这里是关于如何使用内联 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

Answer 6

你可以使用伪元素：

$borderWidth: 3px;
$heartSize: 30px;
div {
  border-bottom: $borderWidth solid orange;
  position: relative;
}
div:after {
  content: '♡'; /* Heart character (U+2661) */
  font-size: 30px;
  height: $heartSize;
  width: $heartSize;
  line-height: $heartSize;
  text-align: center;
  position: absolute;
  bottom: -3*$borderWidth;
  right: 10%;
  border: $borderWidth solid orange;
  border-radius: 50%;
  background: #fff;
  clip: rect(0, $heartSize+2*$borderWidth, $heartSize, 0); /* Old syntax */
  clip-path: inset(0 0 2*$borderWidth 0); /* New syntax */
}

div {
  border-bottom: 3px solid orange;
  position: relative;
}
div:after {
  content: '♡'; /* Heart character (U+2661) */
  font-size: 30px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  bottom: -9px;
  right: 15%;
  border: 3px solid orange;
  border-radius: 50%;
  background: #fff;
  clip: rect(0, 36px, 30px, 0);
  -webkit-clip-path: inset(0 0 6px 0); /* Old syntax */
  clip-path: inset(0 0 6px 0); /* New syntax */
}

<div>Foo<br />bar</div>

Answer 7

CSS = `border-radius` + `overflow:hidden;`

将圆作为伪元素放置在带有 overflow:hidden; 的块中。所以我们得到一条弧线。
走心from the Font Awesome。要通过 CSS 设置图标，请创建另一个带有伪元素的块。如果心脏没有突出到弧线的下边界之外，那么它就不会受到 overflow:hidden; 的威胁，我们会将两个伪元素放在一个块中。
将组装好的方块放在带有橙色底部边框的图片上方。设置负数 bottom 属性以将块降低到边框的深度。

https://codepen.io/glebkema/pen/MoyXxp

.arch {
  overflow: hidden;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.arch:before {
  background: white;
  border: solid 3px orange;
  border-radius: 50%;
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 133.333333%;
}

.heart {
  position: absolute; bottom: -3px; right: 60px;
  width: 48px; height: 36px;
}
.heart:after {
  color: orange;
  content: '\f08a'; /* http://fontawesome.io/icon/heart-o/ */
  display: block;
  font-family: 'FontAwesome';
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  position: absolute; bottom: -4px; left: 0;
  text-align: center;
  width: 100%;
}

.photo {
  background: #9cf;
  border-bottom: solid 3px orange;
  height: 120px;
  position: relative;
}

<div class="photo"><div class="heart"><div class="arch"></div></div></div>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

带缩进圆的线

Line with indented circle

css

svg

css-shapes

CSS = `border-radius` + `overflow:hidden;`

带缩进圆的线

Line with indented circle

css

svg

css-shapes

CSS = border-radius + overflow:hidden;

CSS = `border-radius` + `overflow:hidden;`