Heart & Fragile Heart

One simple html/css heart and another easily broken.

HTML

<div id="heart-container">
    <div class="heart heart-left"></div>
    <div class="heart heart-right"></div>
</div>

<br /><br /><br />

<div class="broken-heart-container">
    <div class="broken-heart broken-heart-left">
        <div class="broken-heart-color broken-heart-round"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-1"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-2"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-3"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-4"></div>
    </div>
    <div class="broken-heart broken-heart-right">
        <div class="broken-heart-color broken-heart-round"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-2"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-3"></div>
        <div class="broken-heart-color broken-heart-slice broken-heart-slice-4"></div>
    </div>
</div>

CSS

#heart-container {
    position: relative;
}

.heart {
    position: absolute;
    background-color: red;
    width: 20px;
    height: 35px;
    border-radius: 10px 10px 0 0;
}

.heart-left {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    left: 0;
}

.heart-right {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    left: 11px;
}

.broken-heart-container {
    position: relative;
    width: 30px;
    height: 35px;
    cursor: pointer;
    float: left;
}

.broken-heart-container div {
    -webkit-transition: 0.1s;
}

.broken-heart {
    position: absolute;
    width: 20px;
    height: 35px;
}

.broken-heart-left {
    -webkit-transform: rotateY(360deg) rotateZ(-45deg);
    -moz-transform: rotateY(359deg) rotateZ(-45deg);
    left: 0;
}

.broken-heart-right {
    -webkit-transform: rotateY(180deg) rotateZ(-45deg);
    -moz-transform: rotateY(180deg) rotateZ(-45deg);
    left: 10px;
}

.broken-heart-color {
    background-color: red;
}

.broken-heart-round {
    border-radius: 10px 10px 0 0;
    width: 20px;
    height: 15px;
}

.broken-heart-slice {
    position: relative;
    top: 0;
    width: 5px;
    float: left;
}

.broken-heart-slice-1 {
    height: 20px;
}

.broken-heart-slice-2 {
    height: 15px;
}

.broken-heart-slice-3 {
    height: 10px;
}

.broken-heart-slice-4 {
    height: 5px;
}

.broken-heart-container:hover .broken-heart-right {
    left: 12px;
    color:grey;
}

.broken-heart-container:hover .broken-heart-left {
    left: -1px;
    color:grey;
}

.broken-heart-container:hover .broken-heart-left .broken-heart-slice {
    top: -5px;
}

JavaScript

// Original css heart icon idea from http://rathersplendid.net/home/pure-css-icons