CSSでハートの枠線のみを表現する方法があれば教えて下さい。

Question

CSSで塗りつぶしのハートを表現する方法は調べれば出てくるのでわかるのですが、塗りつぶしなしの枠線のみを表現する方法がわかりません。
もしわかる方がいましたら教えて下さい。

塗りつぶしのハートを重ねる方法も以下のように試したのですが、曲線部分だけが少し太くなってしまうので、なんとか直せないかと思っています。

<div class="heart">
  <span class="heart-arrange"></span>
</div>

@mixin heart($size, $color) {
    position: relative;
    width: 100px;
    height: 90px;
    -webkit-transform: scale($size);
    -moz-transform: scale($size);
    -ms-transform: scale($size);
    -o-transform: scale($size);
    transform: scale($size);

    &:before, &:after{
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: $color;
      -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%;
    }

    &: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%;
    }
}


.heart {
  position: relative;
  @include heart(0.3, red);
  z-index: 1;

  .heart-arrange {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include heart(0.9, white);
    z-index: 10;
    
  }

}

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

Answer 1

みてていやけがさしそうですが

円 ではなく 曲線 を用いてハートを頑張ればいいと思います

（私はやりたくないレベル）

参考

Comments

[退会済みユーザー]

ご回答ありがとうございます。
いただいた参考ページを読ませていただきましたが、本当にかなり複雑ですね。。

サイズや色などいろいろな組み合わせで使いたいと思っていて、CSSだけでは少し複雑になり過ぎてしまいそうなので、今回は画像を検討してみようと思います。
私の質問について考えていただいたのに申し訳ございません。

ご丁寧にお答えいただきありがとうございました。

Answer 2

・色の反転などをさせたい
・すべてのパターンの画像を用意するのはしんどい（カラーコードで書き換えたい）
・好みのフォルムにしたい
を実現したいということでCSSで描画したいっていうことでしょうか。

CSSでということが重要であればあまりお望みの回答ではないかもしれませんが、
普通の画像じゃなくて、SVGを使ってみてはいかがでしょう？
SVGなら、strokeやfillの色をコードに記述しないで、CSS側で設定することができます。

これは私が作っているサイトのモックですが、上のふたつのアイコンはSVGです。
http://codepen.io/mayo31/pen/dMNavJ

CSSの145行目あたりで、色を指定しています。

Answer 3

そのハートの上に一回り小さい白いハートを重ねればいいんじゃないでしょうか。

面倒ならアイコンフォントを使っちゃうほうが速い気もします。

追記

<div class="heart">
<div class='heart-inner'>
</div>
</div>

.heart{
position: relative;
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: rgba(250,184,66, 1);
}
.heart:before,
.heart:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 1);
}
.heart:before{
bottom: 0px;
left: -100px;
}
.heart:after{
top: -100px;
right: 0px;
}


.heart-inner{
z-index: 10;
position: relative;
width: 190px;
height: 190px;
background-color: white;
top: 5px;
left: 5px;
}
.heart-inner:before,
.heart-inner:after{
position: absolute;
width: 190px;
height: 190px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: white;
}
.heart-inner:before{
bottom: 0px;
left: -100px;
}
.heart-inner:after{
top: -100px;
right: 0px;
}

Comments

[退会済みユーザー]

ハートを2つ重ねる方法でもやってみたのですが、質問を編集して画像を添付した通り、曲線部だけが太くなってしまうという問題にぶつかってしまいました。
こちらの理由はわかりますでしょうか？CSSの内容も新しく添付し直しました。
可能であれば、CSSだけで対応したいと思っておりまして。

[realizerS]

ごちゃごちゃしていますが、以下でどうでしょうか。

```html
<div class="heart">
<div class='heart-inner'>
</div>
</div>
```

```css
.heart{
position: relative;
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: rgba(250,184,66, 1);
}
.heart:before,
.heart:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 1);
}
.heart:before{
bottom: 0px;
left: -100px;
}
.heart:after{
top: -100px;
right: 0px;
}

.heart-inner{
z-index: 10;
position: relative;
width: 190px;
height: 190px;
background-color: white;
top: 5px;
left: 5px;
}
.heart-inner:before,
.heart-inner:after{
position: absolute;
width: 190px;
height: 190px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: white;
}
.heart-inner:before{
bottom: 0px;
left: -100px;
}
.heart-inner:after{
top: -100px;
right: 0px;
}
```

[realizerS]

コメントでコードブロックって表示できなかったのですね。

解答に追記しました。

[退会済みユーザー]

こちら試してみましたが、うまくいきませんでした。
ハートをボタンとしてタップしたら色を反転するなどいろいろやりたいことがあり、CSSではかなり複雑そうになりそうなので、今回は画像を使うことを少し検討してみます。

本当にいろいろとありがとうご丁寧にお答えいただきありがとうございました。

Answer 4

雑ですが。お勧めは「♡」です。

#heart2 {
    border: 1px solid rgba(150, 20, 230, 0.2);
    height: 90px;
    margin: 3em 1em 0;
    position: relative;
    width: 100px;
}
#heart2 > div {
    border: 1px solid;
    border-color: transparent red red transparent;
    bottom: 0;
    display: block;
    height: 50px;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 100% 100% 0;
    width: 50px;
}
#heart2::before {
    left: 34px;
    transform: rotate(90deg);
}
#heart2::after {
    border-color: red transparent transparent red;
    transform-origin: 100% 100% 0;
}
#heart2::before,
#heart2::after {
    border: 1px solid;
    border-color: red transparent transparent red;
    border-radius: 50%;
    content: "";
    height: 50px;
    margin: 10px 0 0 9px;
    position: absolute;
    width: 50px;
}

#font {
    color: red;
    font-family: "游ゴシック","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ＭＳ ゴシック";
    font-size: 100px;
}

<div id="heart2"><div></div></div>
<div id="font">♡</div>
```**動くサンプル：**[https://jsfiddle.net/5j10wxa7/1/](https://jsfiddle.net/5j10wxa7/1/)

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
いただいたもので枠線のみの表示ができることはわかったのですが、そちらを使って期待するものを実装するのはかなり苦労しそうなので、今回は画像を検討しようかと思います。
「♡」でもできることを知らず良い気づきだったのですが、フォルムがあまり好みではないので。。

いつもいろいろと教えていただき、本当にありがとうございます。