html - 内部に動的テキストを含む div でこの形状を実現するにはどうすればよいですか?

Question

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

CSSで作成する必要があります。絶対に必要な場合は画像を使用できますが、いずれにしても拡張可能である必要があります (おそらく、この画像には垂直方向が最適です)。

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