html - How can I best accomplish this shape on a div with dynamic text inside it? -

http://i.imgur.com/sc1nnfp.png

i need create css. can use image if absolutely necessary, either way needs expandable (probably vertically best one).

http://jsfiddle.net/vr2wf/

<div id="cta">     <div class="callus">call today!</div>                  <div class="phonenumber">404-555-5555</div> </div>  #cta {     font-family: arial, sans-serif;     font-weight: bold;     font-size: 20px;     padding: 10px 20px;     color: #fff;     text-align: center;     text-transform: uppercase;     background: #232323;     max-width: 400px;     margin: auto; } .callus, .phonenumber {     display: inline-block; } 

here solution:

http://codepen.io/chovanec/pen/temkh

<div class="rib"><div class="text">call today</div><div class="arrow"><!-- --></div></div>  .rib .text {   font-family: sans-serif;   color: #fff;   background: #000;   padding: 20px 50px 5px 50px;   width: 500px;   font-size: 20px;   text-transform: uppercase;   font-weight: bold;   text-align: center; }  .rib .arrow {   display: block;   border-width: 20px 300px 0 300px;   border-color: transparent;   border-top-color: #000;   border-style: solid;   height: 0;   width: 0;   overflow: hidden; }