Heart Div

Css heart with text inside

by Glynne Turner

HTML

<div id="quarter">
<div class="heart_holder"> 
<div class="text_holder">
text in here <br />
sdfsdf<br />
sdfsdf<br />
</div>
<div class="heart-shape"></div>

</div>
</div>

CSS

#quarter{width:400px; position:absolute;padding:65px 65px }
.heart_holder{margin:0 0;padding:0;width:100%; height:100%; position:relative; }

.text_holder{padding-top:0px;position:absolute;width:200px; text-align:center; color:#ffffff;   font-size:40px
}
.heart-shape{
  z-index:-1;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: pink;
}
.heart-shape:before,
.heart-shape:after{
  position: absolute;
  width: 200px;
  height: 200px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: pink;
}
.heart-shape:before{
  bottom: 0px;
  left: -100px;
}
.heart-shape:after{
  top: -100px;
  right: 0px;
}