Butterfly

Designing a butterfly with 2 divs

by Florin Pop

HTML

<div id="butterfly">
    
</div>
<div id="butterfly2">
    
</div>

CSS

#butterfly {
    position: relative;
    width: 212px;
    height: 100px;
}

#butterfly:before,
#butterfly:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 10px solid #77e;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
     background: url('http://thumb101.shutterstock.com/display_pic_with_logo/1391908/125878037/stock-vector-abstract-blot-of-dots-vector-illustration-125878037.jpg') center center no-repeat;
}

#butterfly:after {
    left: auto;
    right: 52px;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
}


#butterfly2 {
    position: relative;
    width: 212px;
    height: 100px;
}

#butterfly2:before,
#butterfly2:after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 60px;
    height: 60px;
    border: 10px solid #77e;
         border-radius: 50px 0 50px 50px;
    background: url('http://thumb101.shutterstock.com/display_pic_with_logo/1391908/125878037/stock-vector-abstract-blot-of-dots-vector-illustration-125878037.jpg') center center no-repeat;
}

#butterfly2:after {
    left: auto;
    right: 52px;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 0 50px 50px 50px;
}