How to draw heart with text in middle?

Question

I found this answer "css: how to draw circle with text in middle?" , but I need the same, but with a heart shape. I found a lot of heart shape figures online, but none of this with text inside. At the same time, I need the heart only with borders, and when click, filled the background.

My code until now:

.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

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.

I set the border of the :before and :after to give the heart a border.

The toggling of the fill uses functionality from 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>

Answer 2

A quick search and there is a good article about creating shapes with CSS over @ css-tricks.com that can be seen here.

If we take the example of how to create a heart and extend upon it a little we can get the following snippet that gives you a heart that starts out simply as a border;

(function(){
  var heart = document.querySelector('#heart');
  heart.addEventListener('click', function(e) {
    this.className += ' is--filled'
  });
}());

#heart {
    position: relative;
    width: 100px;
    height: 90px;
    text-align: center;
    font-size: 16px;
    position: relative;
}
#heart span {
  width: 100%;
  display: block;
  top: 50%;
  margin-top: -16px;
  line-height: 16px;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
#heart.is--filled:before,
#heart.is--filled:after {
  background-color: red;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    border: 1px solid red;
    transition: background-color .25s ease 0s;
    -webkit-transition: background-color .25s ease 0s;
    -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%;
}

#heart:before {
  border-right: none;
  border-bottom: none;
}
#heart:after {
  border-left: none;
  border-bottom: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id='heart'>
    <span>Hey</span>
  </div>
</body>
</html>

However, as someone else has mentioned in the comments it may be an easier approach to use images or the canvas element. I say this purely because it may prove difficult to get just the heart border you desire before clicking the heart (easier to see if you run the snippet). You could opt for much softer opaque background color before you click and then transition to red maybe?

Hope this helps you out!