如何在带有动态文本的div上最好地完成此形状？

Question

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;
}

Answer 1

Here is my solution:

http://codepen.io/Chovanec/pen/temKh

<div class="rib"><div class="text">Call us 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;
}