内含文字的 CSS 心形

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:“#heart”时，它只是将文本放在后面。

在此先感谢您的帮助!

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;
}

看这个 fiddle http://jsfiddle.net/FH9S7/