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

Using two pseudo-elements that are skewed in opposite directions (by 45 deg) would also be a good option for producing this shape. The advantage of using this option is that it produces a transparent cut on the right-top and right-bottom unlike the shapes created using the border method.

I wouldn't recommend clip-path (with or without SVG) because of the lack of support in IE.

#home-img-text{
  overflow: hidden;
}  
#home-img-text-container {
  position: relative;
  background: rgba(0, 0, 0, .8);
  padding: 30px 20px;
  margin: 40px 0px;
}
#home-img-text-container:after,
#home-img-text-container:before {
  position: absolute;
  content: '';
  height: 40px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-container:before {
  top: -40px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-container:after {
  bottom: -40px;
  transform: skewX(-45deg);
  transform-origin: right top;
}
#home-img-text-description {
  color: #FFF;
  font-size: 2.5em;
  line-height: 1.4em;
}
body {
  background-image: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

  

    
WRECKING
      
& DEMOLITION
      
DONE RIGHT.
  

Here is a version with borders on all the sides of the shape:

#home-img-text{
  border-left: 2px solid;
  overflow: hidden;
}  
#home-img-text-container {
  position: relative;
  padding: 30px 20px;
  margin: 40px 0px;
  background: rgba(0, 0, 0, .8);
  border-right: 2px solid;
}
#home-img-text-container:after,
#home-img-text-container:before {
  position: absolute;
  content: '';
  height: 38px;
  width: 100%;
  left: 0px;
  background: inherit;
  border: 2px solid;
}
#home-img-text-container:before {
  top: -40px; /* -(height + border-top) */
  border-width: 2px 3px 0px 0px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-container:after {
  bottom: -40px; /* -(height + border-bottom) */
  border-width: 0px 3px 2px 0px;
  transform: skewX(-45deg);
  transform-origin: right top;
}
#home-img-text-description {
  color: #FFF;
  font-size: 2.5em;
  line-height: 1.4em;
}

body {
  background-image: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

  

    
WRECKING
      
& DEMOLITION
      
DONE RIGHT.
  

---

If you need to add an image (either as background or not), it will need an extra couple of elements and the element to have a fixed height. but as mentioned earlier this approach has its advantages even if it needs extra elements.

#home-img-text {
  position: relative;
  padding: 40px 0px; /* top/bottom padding equal to height of the two skewed elements, don't set left/right padding  */
  overflow: hidden;
}
#home-img-text-container {
  height: 170px; /* height of image - 2 * height of skewed element */
  padding: 0px 20px; /* don't set any top/bottom padding */
  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),url(http://lorempixel.com/800/250/nature/1);
  background-position: 0px 0px, 0px -40px; /* 0px 0px, 0px -(height of skewed element) */
}
#home-img-top,
#home-img-bottom {
  position: absolute;
  content: '';
  height: 40px;
  width: 100%;
  left: 0px;
  overflow: hidden;  
}
#home-img-top {
  top: 0px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-bottom {
  bottom: 0px;
  transform: skewX(-45deg);
  transform-origin: right top;
}
#home-img-top:before,
#home-img-bottom:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(http://lorempixel.com/800/250/nature/1);
}
#home-img-top:before {
  top: 0px;
  background-position: 0px 0px,0px 0px;
  transform: skewX(-45deg);
  transform-origin: right bottom;
}
#home-img-bottom:before {
  bottom: 0px;
  background-position: 0px 0px, 0px -210px; /* 0px -(height of image - height of skewed element) */
  transform: skewX(45deg);
  transform-origin: right top;
}
#home-img-text-description {
  color: #FFF;
  font-size: 2.5em;
  line-height: 1.4em;
}
body {
  background-image: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

  

  

    
WRECKING
      
& DEMOLITION
      
DONE RIGHT.