css3 - Create A responsive Pear Shape using CSS or responsive Images -

for project have create pear-shaped container. tried doing using css3 rounded corners doesnt it. used image @ bottom, need responsive (scalable image).

i want code like: http://tinypic.com/view.php?pic=98fxid&s=5

but minimize browser screen, layout breaks , pear shape not scalable. know if there way using css3 or better way using scalable images.

by way, i'm using bootstrap , first attempt @ making website using bootstrap, guidance appreciated.

you create pear shape using 2 intersecting circle segments, 1 left-hand side , 1 right-hand side. circle segments created limiting circle parent container via overflow: hidden;. simplify markup, can create child circle elements using :before and/or :after pseudo elements.

html:

<div class="content-form">     <div class="pear-shape left"></div>     <div class="pear-shape right"></div> </div> 

css:

.content-form {     width: 75%;     max-width: 325px;     height: 200px;     background: url(http://www.domainandseo.com/bootstrap/img/design.png);     position: relative; } .pear-shape {     overflow: hidden;     width: 50%;     height: 200px;     position: relative;     top: 100%; } .left { float: left; } .right { float: right; } .pear-shape.left:before {     position: absolute;     left: 0;     top: 0;     content: '';     width: 200%;     height: 100%;     border-radius: 0 0 0 250px;     background: url(http://www.domainandseo.com/bootstrap/img/design.png); } .pear-shape.right:before {     position: absolute;     top: 0;     right: 0;     content: '';     width: 200%;     height: 100%;     border-radius: 0 0 250px 0;     background: url(http://www.domainandseo.com/bootstrap/img/design.png); } 

check out example fiddle.