Кнопка CSS - 100% от родителя

Question

Кто-нибудь может посоветовать лучший кросс-браузерный метод / метод устройства для стилизации кнопки с изогнутыми краями, которая будет растягиваться на ширину родительского элемента?

Кнопка должна использовать фоновые изображения - я рассматривал следующий код - Кнопка должна растягиваться на ширину 90% внешнего div - btnContent div будет растягиваться, а leftCurve / rightCurve останется с той же шириной.

<div style="width:90%">
 <div class="leftCurve"></div>
 <div class="btnContent">button 1</div>
 <div class="rightCurve"></div>
</div>

Answer 1

Попробуйте этот метод

<style>
.outerdiv{ width:100%;}
.rightcurve{ background:url(rightcurveimage.png) no-repeat 100% 0; height:20px; padding-right:10px;}
.leftcurve{ background:url(leftcurveimage.png) no-repeat 0 0; width:1%; height:20px; float:left; clear:right;}
.btncenter{ background:url(btncenterimage.png) repeat 0 0; height:20px; float:left; width:99%;}
</style>

<div style="width:100%">
 <div class="rightcurve">
  <div class="leftcurve"></div>
  <div class=btncenter> Button 1</div>
 </div>
</div>

Примечание: Вы должны поместить левую кривую и btncenter div в правую кривую div

Answer 2

Это не фактический код. В любом случае вам нужно будет поместить 90% в btnContent, а не в родительский элемент.