Question

我想把一个名字放入用CSS制作的心中。我似乎无法弄明白该怎么做。

我已经有了这个代码：

#heart {
  position:relative;
  width:100px;
  height:100px;
}

#heart:before,#heart:after {
  position:absolute;
  content:"";
  left:50px;
  top:0;
  width:50px;
  height:80px;
  background:#F00000;
  -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：＆＃34;＃heart＆＃34;时，它只是将文本放在后面。

提前感谢您的帮助！

Answer 1

添加span元素

<span id="text">Love</span>

用css

#text{
    position:absolute;
    z-index:3;
    margin-left:35px;
    margin-top:25px;
    color:white;
    display:block;
}

看到这个小提琴http://jsfiddle.net/FH9S7/

Answer 2

您可以将z-index: -1应用于:before和:after元素。它会移动文本后面的心形，而不需要额外的div。

之后，您可以使用填充或文本对齐来对齐文本内部的文本：

http://jsfiddle.net/GolezTrol/hYEb6/1/

PS：在我的小提琴中，我将id改为了classname。通过这样做，您可以轻松地回收样式，为页面添加多个心脏。

-edit -

也许你会喜欢这个。如果要使用额外的元素，那么使心脏的大小也更容易：

HTML可以是（当然再次使用类）：

<div class="heart">
    <div class="inner">
        Test 
    </div>
</div>

CSS有点大，但可扩展：

.heart {
  /* The only thing needed to change the size, are these numbers: */
  width:200px;
  height:200px;
}

.heart .inner {
  /* Here is the styling and positioning for your text */
  padding-top: 20%;
  font-size: 3em;
  color: white;
  font-weight: bold;
}

/* The rest is default, and doesn't need to be modified, unless you want to change background color or other 'heart' properties. */
.heart .inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.heart {
  position:relative;
  text-align: center;
  box-sizing: border-box;
}

.heart:after,
.heart .inner:before, 
.heart .inner:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  background-color: #F00000;
}

.heart:after {
  width: 60%;
  height: 60%;
  left: 20%;
  top: 25%;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  border-radius: 0 30% 0 0;
}

.heart .inner:before, 
.heart .inner:after {
  width:58%;
  height:58%;
  -moz-border-radius:50%;
  border-radius: 50%;
  top: 5.5%;
}
.heart .inner:before {
    left: 0;
}
.heart .inner:after {
  right: 0%;
}

这里有小提琴，展示了3颗不同大小的心：http://jsfiddle.net/GolezTrol/hYEb6/4/

Answer 3

如果你想使用position：absolute，你可以这样做：

http://fiddle.jshell.net/y9e58/

<div id="abs">name</div>

#abs{
    position:absolute;
    top: 30px;
    left:40px;
}

CSS Heart with Text in

3 个答案: