Search code examples
csstwitter-bootstrapcss-shapes

CSS arrow at bottom of Bootstrap Jumbotron

I am trying to create a css shape using borders to represent the BLACK shape in the image below....

The black shape will sit inside (or over) a Bootstrap jumbotron. The red area is a background image.

enter image description here

I have been experimenting with the below code which gives me an arrow, but not the shape I need (which is two arrows perhaps?). Any help appreciated.

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

  • With using @IWrestledABearOne template, here is something with a kind of arrow at the bottom.

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

    Css:

    .yomama{
 background-image: url(https://i.sstatic.net/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: Add a wrapper for the jumbotron :