如何在中间画出文字的心？

Question

我找到了这个答案"css:如何用中间的文字绘制圆圈？" ,但我需要相同,但心形.我在heart网上找到了很多形状数字,但这里没有文字内容.与此同时,我heart只需要带边框,点击时填充背景.

我的代码到现在为止:

.heart {
  width: 100px;
  height: 90px;
  font-size: 50px;
  color: #fff;
  line-height: 100px;
  text-align: center;
}
.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%;
}

<div class="heart">Heart</div>

Answer 1

为了使文本显示在心脏上,您需要将心脏容器设置为相对,将其内部的文本设置为绝对,如下所示.

我设置了边界,:before并:after给了心脏一个边界.

填充的切换使用来自YouMightNotNeedJQuery.com的功能.

function toggleFill(heart, className) {  
  if (!hasClass(heart, className)) {
    addClass(heart, className);
  } else {
    removeClass(heart, className);
  }
}

function addClass(el, className) {
  if (el.classList) {
    el.classList.add(className);
  } else {
    el.className += ' ' + className;
  }
}

function removeClass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(
      new RegExp('(^|\\b)' + className.split(' ').join('|') +
                 '(\\b|$)', 'gi'), ' ');
  }
}

function hasClass(el, className) {
  if (el.classList) {
    return el.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className +
               '( |$)', 'gi').test(el.className);
  }
}

.unselectable {
   -webkit-user-select: none;
    -khtml-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}
.filled:before,
.filled:after {
  background: red !important;
}
#wrapper {
  width: 300px;
  height: 180px;
  background: #444;
}
.heart {
  position: relative;
  top: calc(50% - 45px);   /* 1/2 height of wrapper - 1/2 height of heart */
  left: calc(50% - 50px);  /* 1/2 width of wrapper  - 1/2 width of heart */
  width: 100px;
  height: 90px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  top: 0px;
  width: 50px;
  height: 80px;
  background: inherit;
  -moz-border-radius: 50px 50px 0 0;
       border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  -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%;
  
  border-left: 2px solid red;
  border-top: 2px solid red;
  border-bottom: 1px solid red;
}
.heart:after {
  left: 0px;
  -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%;
  
  border-right: 2px solid red;
  border-top: 2px solid red;
  border-bottom: 1px solid red;
}
.heart-text {
  position: absolute;
  top: 0;
  left: calc(50px - 30px); /* 1/2 width of heart  - 1/2 width of text */
  z-index: 100;
  line-height: 66px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #FFF;
}

<div id="wrapper">
  <div class="heart" onclick="toggleFill(this, 'filled')">
    <div class="heart-text unselectable">
      Heart
    </div>
  </div>
</div>