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

Question

你会推荐我用什么技术在 html 和 css 中得到这个形状？ http://imageshack.com/a/img633/581/aPKAQp.png 我想把文本内容放在里面。我还想保持网站响应（我正在使用 bootstrap 框架）。我考虑了背景图像、:before :after 或通过边框设置塑造 div。我想知道其他人会如何解决这个问题..

谢谢..

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

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

Best solution for <div> shapes with content

html

css

web

shape