CSS Bootstrap 超大屏幕底部的箭头

Question

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

黑色形状将位于 Bootstrap 超大屏幕内（或上方）。红色区域为背景图。

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

.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：为超大屏幕添加一个包装器：

CSS Bootstrap 超大屏幕底部的箭头

CSS arrow at bottom of Bootstrap Jumbotron

css

twitter-bootstrap

css-shapes