Adding a 45 degree angle to a container

Question

I have a container element that I am trying to figure out if I can shape it to have two 45 degree angles. Like this:

It is simply a rectangle now:

<

Answer 1

#home-img-text-container {
  background: rgba(0,0,0,.8);
  padding: 30px 20px;
  position: relative;
}

#home-img-text-container:before,
#home-img-text-container:after {
  position: absolute;
  content: '';
  display: block;  
  right: -40px;
  border: 40px solid transparent;
  border-right: 40px solid transparent;  
}

#home-img-text-container:before {
  top: 0;
  border-top: 40px solid white;  
}

#home-img-text-container:after {
  bottom: 0;
  border-bottom: 40px solid white;
}

#home-img-text-description {
  color: #FFF;
  font-size: 2.5em;
  line-height: 1.4em;
}

  

    
WRECKING 
& DEMOLITION 
 DONE RIGHT.