CSSで塗りつぶしのハートを表現する方法は調べれば出てくるのでわかるのですが、塗りつぶしなしの枠線のみを表現する方法がわかりません。
もしわかる方がいましたら教えて下さい。
塗りつぶしのハートを重ねる方法も以下のように試したのですが、曲線部分だけが少し太くなってしまうので、なんとか直せないかと思っています。
HTML
1<div class="heart"> 2 <span class="heart-arrange"></span> 3</div>
CSS
1@mixin heart($size, $color) { 2 position: relative; 3 width: 100px; 4 height: 90px; 5 -webkit-transform: scale($size); 6 -moz-transform: scale($size); 7 -ms-transform: scale($size); 8 -o-transform: scale($size); 9 transform: scale($size); 10 11 &:before, &:after{ 12 position: absolute; 13 content: ""; 14 left: 50px; 15 top: 0; 16 width: 50px; 17 height: 80px; 18 background: $color; 19 -moz-border-radius: 50px 50px 0 0; 20 border-radius: 50px 50px 0 0; 21 -webkit-transform: rotate(-45deg); 22 -moz-transform: rotate(-45deg); 23 -ms-transform: rotate(-45deg); 24 -o-transform: rotate(-45deg); 25 transform: rotate(-45deg); 26 -webkit-transform-origin: 0 100%; 27 -moz-transform-origin: 0 100%; 28 -ms-transform-origin: 0 100%; 29 -o-transform-origin: 0 100%; 30 transform-origin: 0 100%; 31 } 32 33 &:after{ 34 left: 0; 35 -webkit-transform: rotate(45deg); 36 -moz-transform: rotate(45deg); 37 -ms-transform: rotate(45deg); 38 -o-transform: rotate(45deg); 39 transform: rotate(45deg); 40 -webkit-transform-origin: 100% 100%; 41 -moz-transform-origin: 100% 100%; 42 -ms-transform-origin: 100% 100%; 43 -o-transform-origin: 100% 100%; 44 transform-origin: 100% 100%; 45 } 46} 47 48 49.heart { 50 position: relative; 51 @include heart(0.3, red); 52 z-index: 1; 53 54 .heart-arrange { 55 display: inline-block; 56 position: absolute; 57 top: 0; 58 right: 0; 59 bottom: 0; 60 left: 0; 61 @include heart(0.9, white); 62 z-index: 10; 63 64 } 65 66}
まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。