CSS Heart with Text within

Posted by user3696456 on Stack Overflow See other posts from Stack Overflow or by user3696456
Published on 2014-06-01T09:20:49Z Indexed on 2014/06/01 9:24 UTC
Read the original article Hit count: 160

Filed under:

I would like to put a name into a heart made with CSS. And I can't seem to figure out how to do it.

I have this code already:

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

When I try to write the name directly into the div: "#heart", it just puts the text behind.

Thanks in advance for any help!

© Stack Overflow or respective owner

Related posts about css