Бесполезная штука, но все же)

Основная цель, чтоб показать возможности CSS3, то что можно рисовать довольно сложные фигуры.
Работает не во всех браузерах

                        
CSS:

.clover {

    position: relative;

    margin: 100px;

}



.clover .leaf {

    transform-origin: 50px 50px;

    -webkit-transform-origin: 50px 50px;

    -ms-transform-origin: 50px 50px;

}



.clover .leaf:before, .clover .leaf:after {

    position: absolute;

    content: '';

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background-color: #3d9c21;

    border-radius: 30px 20px 0 0;

    

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    

    transform-origin: 0 100%;

    -webkit-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;

}



.clover .leaf:after {

    left: 0;

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform-origin: 100% 100%;

}



.clover .leaf.right {

    transform: rotate(120deg) translate(15px, -30px);

    -webkit-transform: rotate(120deg) translate(15px, -30px);

    -ms-transform: rotate(120deg) translate(15px, -30px);

}



.clover .leaf.left {

    transform: rotate(-120deg) translate(-15px, -30px);

    -webkit-transform: rotate(-120deg) translate(-15px, -30px);

    -ms-transform: rotate(-120deg) translate(-15px, -30px);

}

-------------------------------

HTML:

<div class="clover">

    <div class="leaf"></div>

    <div class="leaf left"></div>

    <div class="leaf right"></div>

</div>