CSS Heart with Text within
- by user3696456
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!
