带有内容的<div>形状的最佳解决方案

Question

你会建议我用什么技巧在html和css中获得这个形状？ http://imageshack.com/a/img633/581/aPKAQp.png 我想把文字内容放进去。我也希望保持网站响应（我正在使用bootstrap框架）。我想到了background-image，：before：after，或者通过边框设置整形div。我想知道其他人如何解决这个问题。

THX ..

Answer 1

你走了：

http://codepen.io/thelifemgmt/pen/XbjNKg

<div class="banner banner--gold"></div>


.banner {
  position: relative;
  width: 200px;
  height: 60px;
  background-color: #ccc;
}

.banner:before, .banner:after {
  position: absolute;
  top: 10px;
  width: 15px;
  height: 0;
  border-top: 20px solid #666;
  border-bottom: 20px solid #666;
  content: '';
}

.banner:before {
  left: -35px;
  border-left: 20px solid transparent;
}

.banner:after {
  right: -35px;
  border-right: 20px solid transparent;
}

.banner--gold {
  background-color: #cb9a31;
}

.banner--gold:before, .banner--gold:after {
  border-top-color: #9a6813;
  border-bottom-color: #9a6813;
}