带有缩进圆的线

时间：2015-05-28 12:06:37

标签： css css3 svg css-shapes

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

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

在这种情况下，

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

border with indented circle

7 个答案:

答案 0 :(得分：11)

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

在SVG中：

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

＆＃13;
＆＃13; 
img {
  width: 100%;
  display: block;
}
div {
  position: relative;
  height: 100px;
  background: #fff;
}
svg {
  position: absolute;
  bottom: 100%;
  width: 100%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

有关SVG中路径命令的详细信息，请参阅MDN

答案 1 :(得分：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>

答案 2 :(得分：5)

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

通常情况下，CSS3非常适合创建基本形状，但是当涉及到轮廓形状时，它会失败。这是因为它们通常依赖于使用选择器之前和之后创建多个形状。这通常有效但如果你想应用边框，它会导致形状重叠。

唯一真正的css解决方案是创建一个稍小的第二个心形作为面具。但这是标记膨胀，所以SVG真的是你最好的选择。

在这里https://jsfiddle.net/6qywoxsk/

是一个快速而又肮脏的例子

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="heartCon">
  <div class="heart"></div>
  <div class="heart heart2"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：3)

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

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

答案 4 :(得分：1)

如果您真的想要使用css，您可以试用一些图片到css的网络服务（例如http://image2css.alexdoesit.com/ - 只是第一个在谷歌中弹出）

尽管如此，最简单，最干净的方法是使用透明图像。

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

答案 5 :(得分：0)

CSS = border-radius + overflow:hidden;

  1. 将圆圈作为伪元素放置在overflow:hidden;的块中。所以我们得到一个弧。

  2. 抓住心脏from the Font Awesome。要通过CSS设置图标，请使用伪元素创建另一个块。如果心脏没有伸出弧线的下边界，那么overflow:hidden;就不会受到威胁，我们会将两个伪元素放在一个块中。

  3. 将装配好的块放在图片顶部，底部为橙色边框。设置负bottom属性以将块降低到边框的深度。

    4. 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">

答案 6 :(得分：-1)

您可以使用border-radius属性使用CSS实现圆形：

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

修改

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

橙色下边框可以是<div>，其高度为1px或2px，宽度为100%。心脏元素可能是另一个div，样式就像我上面解释的那样。接下来，您只需将更高的z-index（以及position: relative）应用于心脏，而不是<div>。并且您需要对margin-top应用一些否定的<div>，直到它重叠。

只是一个想法，也许它会把你送到某个地方。

相关问题
最新问题