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

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

http://i.imgur.com/Sc1NnFp.png
I need to create that with CSS. I can use an image if absolutely
necessary, but either way it needs to be expandable (probably vertically
is best for this one).
http://jsfiddle.net/VR2WF/
<div id="cta">
<div class="callus">Call us 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;
}