带有缩进圆的线

Question

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

我知道如何使用CSS甚至是图像来实现心脏,但弯曲的边框是我所不知道的.

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

Answer 1

以下是如何使用内联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

Answer 2

您可以使用伪元素:

$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 3

因此,对于你的问题最好的解决办法是使用SVG形状像这样,或自定义字体,你可以修改颜色,他们会很好地扩展为视网膜等.

通常情况下,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>