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

时间：2015-08-27 12:38:20

标签： javascript jquery css html5 css3

我找到了这个答案"css: how to draw circle with text in middle?" ，但我需要相同，但心形。我在网上发现了很多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>

4 个答案:

答案 0 :(得分：5)

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

我设置了:before和:after的边框，为心脏提供了边框。

填充的切换使用YouMightNotNeedJQuery.com中的功能。

＆＃13;
＆＃13; 
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);
  }
}
＆＃13; 
.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;
}
＆＃13; 
<div id="wrapper">
  <div class="heart" onclick="toggleFill(this, 'filled')">
    <div class="heart-text unselectable">
      Heart
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

快速搜索，有一篇关于使用CSS在@ css-tricks.com上创建形状的好文章，可以看到here。

如果我们举一个如何创建一个心脏的例子，并稍微延伸一下，我们可以得到以下片段，它给你的心脏开始只是一个边界;

＆＃13;
＆＃13; 
(function(){
  var heart = document.querySelector('#heart');
  heart.addEventListener('click', function(e) {
    this.className += ' is--filled'
  });
}());
＆＃13; 
#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;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id='heart'>
    <span>Hey</span>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

然而，正如其他人在评论中提到的那样，使用图像或画布元素可能更容易。我这样说纯粹是因为在单击心脏之前可能很难获得您想要的心脏边界（如果您运行该片段则更容易看到）。您可以选择更柔和的不透明背景颜色，然后单击然后转换为红色吗？

希望这会帮助你！

答案 2 :(得分：3)

使用css3的伪元素。

.text {
  position: absolute;
  color: #eee;
  z-index: 99;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#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 id="heart">
  <div class="text">ABC</div>
</div>

答案 3 :(得分：1)

使用此

HTML

＆＃13;
＆＃13; 
$('#change').click(function() {
   var className = $(this).attr('class');
    if(className == "heart"){
     $(this).removeClass('heart');
	$(this).addClass('heart1');
    }
    else{
    $(this).removeClass('heart1');
	$(this).addClass('heart');
    }
});
＆＃13; 
.txt{
    z-index:1;
    font-size: 20px;
  color: #000;
    position:relative;
    text-align:center;
    top:15px;
    right:5px;
}
.heart {
  width: 100px;
  height: 90px;

}
.heart1 {
  width: 100px;
  height: 90px;

}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: yellow;
  -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%;
}
.heart1:before,
.heart1: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%;
}
.heart1: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: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%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change" class="heart"><div class="txt">Heart</div></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题