Zelda Heart Piece in CSS3 - Snippet

Preview
HTML
CSS
JS

<div class="cssdeck">
	<div class="heart_piece"></div>
	<div class="heart_container"></div>
</div>

.cssdeck {
}

.heart_piece { 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.heart_piece:before {
    position: absolute;
    content: "";
    
    left: 150px;
    top: 80px;
    width: 75px;
    height: 125px;
    
    background-color: #f05f5f;
    
    -webkit-border-radius: 50px 50px 0 0;
    -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_piece:after {
    position: absolute;
      content: "";

    background-image: -ms-linear-gradient(right, #EF1818 0%, #f05f5f 100%);
    background-image: -moz-linear-gradient(right, #EF1818 0%, #f05f5f 100%);
    background-image: -o-linear-gradient(right, #EF1818 0%, #f05f5f 100%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #EF1818), color-stop(1, #f05f5f));
    background-image: -webkit-linear-gradient(right, #EF1818 0%, #f05f5f 100%);
    background-image: linear-gradient(right, #EF1818 0%, #f05f5f 100%);
    
    left: 75px;
    top: 80px;
    width: 75px;
    height: 125px;
    
    -webkit-border-radius: 50px 50px 0 0;
    -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_piece:after { 
    left: 50;
    
    -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%;
}

.heart_container { 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.heart_container:before, .heart_container:after {
    position: absolute;
      content: "";
  
    left: 150px;
    top: 72px;
    width: 100px;
    height: 150px;
    
    background-color: #bbb;
    
    -webkit-border-radius: 50px 50px 0 0;
    -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_container:after { 
    left: 50px;
    
    -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%;
}