Danish woven heart

danish-heart.css

/**
    Danish woven heart
**/

.heart {
    position: absolute;
    left: 77px;
    width: 3em;
    height: 3em;
    font-size: 16px;
    z-index: 5;
    top: 60px;
    cursor: pointer;
    opacity: 0.75;
}
    .heart:hover {
        opacity: 0.85;
        font-size: 17px;
        left: 75px;
        top: 58px;
    }
    .heart-left,
    .heart-right {
           -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
                border-radius: 100%;
        top: -30%;
    }
    .heart-left,
    .heart-right,
    .heart-bottom,
    .heart-content {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    .heart-left {
        z-index: 4;
        background: #c4f074;
        left: -30%;
           -moz-box-shadow: inset 0.1em 0.1em 0.1em #aaa, -1px -1px 0 #3d3d3d;
        -webkit-box-shadow: inset 0.1em 0.1em 0.1em #aaa, -1px -1px 0 #3d3d3d;
                box-shadow: inset 0.1em 0.1em 0.1em #aaa, -1px -1px 0 #3d3d3d;
    }
    .heart-right {
        z-index: 3;
        background: #fff;
        right: -30%;
           -moz-box-shadow: inset -0.1em 0.1em 0.25em #aaa, -1px -1px 0 #3d3d3d;
        -webkit-box-shadow: inset -0.1em 0.1em 0.25em #aaa, -1px -1px 0 #3d3d3d;
                box-shadow: inset -0.1em 0.1em 0.25em #aaa, -1px -1px 0 #3d3d3d;
    }
    .heart-content {
        border-radius: 7% 0;
        top: 0;
        left: 0;
        zoom: 1;
        z-index: 4;
           -moz-transform: rotate(45deg);
             -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);  
                   filter: progid:DXImageTransform.Microsoft.Matrix(
                     M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
        
        background-color: #fff;
        background-image: 
            -webkit-linear-gradient(45deg, #c4f074 25%, transparent 25%, transparent 75%, #c4f074 75%, #c4f074), 
            -webkit-linear-gradient(45deg, #c4f074 25%, transparent 25%, transparent 75%, #c4f074 75%, #c4f074);
        background-size: 2em 2em;
        background-position: 0 0, 1em 1em;
            
           -moz-box-shadow: inset -0.075em -0.075em 0.2em #bbb;
        -webkit-box-shadow: inset -0.075em -0.075em 0.2em #bbb;
                box-shadow: inset -0.075em -0.075em 0.2em #bbb;
    }

danish-heart.html

<div class="heart">
    <div class="heart-left"></div>
    <div class="heart-right"></div>
    <div class="heart-content"></div>
</div>