Bootstrap Jumbotron底部的CSS箭头

Question

我正在尝试使用边框创建一个css形状来表示下面图像中的黑色形状....

黑色形状将位于Bootstrap jumbotron内部（或上方）。红色区域是背景图像。

我一直在试验下面的代码，它给了我一个箭头，但不是我需要的形状（可能是两个箭头？）。 任何帮助表示赞赏。

.jumbotron:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-bottom: 60px solid red;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
}

Answer 1

使用@IWrestledABearOne模板，底部有一种箭头。

Bootply ：http://www.bootply.com/WgaUA2VjxN

<强>的CSS ：

.yomama{
 background-image: url(https://i.stack.imgur.com/O0Zxn.png);
 background-size: cover;
  background-position: center bottom;
  overflow:hidden;
  margin:0;
}
.yomama-wrp{overflow:hidden;position:relative;}
.yomama:before{
content:'';
  width:150%;
      left:-25%;
  background:black;
  height:100%;
  position:absolute;
      top:100%;

      transform-origin:top center;
      transform: rotate(10deg);// translateY(-30px);
}
.yomama:after{
content:'';
  width:150%;
      right:-25%;
  background:black;
  height:100%;
  position:absolute;
      top:100%;      
      transform-origin:50% 0%;
      transform: rotate(-10deg);// translateY(-30px);
}

Html ：为jumbotron添加包装器：