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

Answer 1

这是我的解决方案:

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