<div class="hero">
  <figure>
    <img src="https://unsplash.it/1600/900?image=830" alt="" />
    <figcaption>
      <h1>Angled Edge</h1>
      <p>Image with CSS clip-path</p>
    </figcaption>
  </figure>
</div>

<div class="promo">
  <h1>Angled Edge</h1>
  <p>CSS background with CSS clip-path</p>
</div>
// slanted edge here
.hero img {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
.promo {
  clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
}

// demo code below
.hero {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
  
  img {
    width: 100%;
  }
  
  figcaption {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
  h1 {
    font-size: 32px;
  }
  
  p {
    font-size: 14px;
    font-weight: 300;
    margin-top: 0.5em;
  }
}

.promo {
  background: url(https://unsplash.it/1600/900?image=830) no-repeat;
  background-size: cover;
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  margin: 50px 0;
  overflow: hidden;
  padding: 150px 20px;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
  
  h1 {
    font-size: 32px;
  }
  
  p {
    font-size: 14px;
    font-weight: 300;
    margin-top: 0.5em;
  }
}
View Compiled

External CSS

  1. //fonts.googleapis.com/css?family=Fira+Sans:300,500

External JavaScript

This Pen doesn't use any external JavaScript resources.