我如何为boostrap div制作这个形状？

Question

我需要使bootstrap div col-xs-2具有附加图像的形式，有两种。

我希望你能帮助我！

问候。

Answer 1

您可以尝试this。

Firefox this polyfill支持。

有关clip-path

的更多信息

Answer 2

您可以使用以下边框执行此类操作：before＆amp; ：后 http://codepen.io/anon/pen/gWOwpz

＆＃13;

＆＃13;

.container {
  margin-top:40px;
}
.arrow {
  position: relative;
  height: 80px;
  margin-bottom: 20px;
}
.arrow--grey {
  background-color: #aaa;
}
.arrow--green {
  background-color: #037b03;
}
.arrow:before {
  left:0;
  position: absolute;
  border-left: 40px solid #fff;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  box-sizing: border-box;
}
.arrow:after {
  right:0;
  position: absolute;
  border-left: 40px solid transparent;
  border-top: 40px solid #fff;
  border-bottom: 40px solid #fff;
  box-sizing: border-box;
}
.arrow--grey:before, .arrow--grey:after {
  content: "";
}
.arrow--green:after {
  content: "";
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="arrow arrow--grey col-xs-2"></div>
  </div>
  <div class="row">
    <div class="arrow arrow--green col-xs-2"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;