Cut the corner

Trying to get an slanted "side" to an element that keeps its fixed degree and will appear as a cut-away lower right corner when the box grows taller.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cut the corner</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section class="teasers">
  <div class="teaser teaser--one">
    <div class="teaser__content">
      <h2 class="teaser__heading">Lorem ipsum  dolor</h2>
      <p class="teaser__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur expedita excepturi voluptate voluptatibus quam, ratione alias. At animi pariatur laborum maiores veritatis voluptates.</p>
    </div>
  </div>

  <div class="teaser teaser--two">
    <div class="teaser__content">
      <h2 class="teaser__heading">Lorem ipsum</h2>
      <p class="teaser__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur expedita excepturi voluptate voluptatibus quam, ratione alias.</p>
    </div>
  </div>

  <div class="teaser teaser--three">
    <div class="teaser__content">
      <h2 class="teaser__heading">Lorem ipsum</h2>
      <p class="teaser__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur expedita excepturi voluptate voluptatibus quam, ratione alias. At animi pariatur.</p>
    </div>
  </div>
</section>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.teaser__body {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

body {
  height: 100%;
  font-family: "Roboto", Arial, sans-serif;
  background-color: #555;
  width: 95%;
  max-width: 60em;
  margin: 4rem auto;
  background-image: -webkit-repeating-linear-gradient(347deg, transparent, transparent 1px, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0.2) 6px);
  background-image: repeating-linear-gradient(103deg, transparent, transparent 1px, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0.2) 6px);
  background-size: 3000px 3000px;
}

.teaser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row no-wrap;
      flex-flow: row no-wrap;
  margin-bottom: 1rem;
}

.teaser__content {
  padding: 1em;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.teaser__heading {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

.teaser__body {
  font-size: 0.866em;
}

.teaser::after {
  content: '';
  -webkit-box-flex: 0;
      -ms-flex: 0 0 12%;
          flex: 0 0 12%;
  background-size: 280px 600px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(347deg, #F90 36%, transparent 36.5%);
  background-image: linear-gradient(103deg, #F90 36%, transparent 36.5%);
}
.teaser--one > .teaser__content {
  background-color: #F90;
}
.teaser--one::after {
  background-image: -webkit-linear-gradient(347deg, #F90 36%, transparent 36.2%);
  background-image: linear-gradient(103deg, #F90 36%, transparent 36.2%);
}
.teaser--two > .teaser__content {
  background-color: #FC0;
}
.teaser--two::after {
  background-image: -webkit-linear-gradient(347deg, #FC0 36%, transparent 36.2%);
  background-image: linear-gradient(103deg, #FC0 36%, transparent 36.2%);
}
.teaser--three > .teaser__content {
  background-color: #C9D;
}
.teaser--three::after {
  background-image: -webkit-linear-gradient(347deg, #C9D 36%, transparent 36.2%);
  background-image: linear-gradient(103deg, #C9D 36%, transparent 36.2%);
}

@media (min-width: 41em) {
  .teaser__body {
    clip: none;
    position: static;
    height: auto;
    width: auto;
    margin: initial;
  }

  .teasers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    margin-right: -1rem;
  }

  .teaser {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 1rem);
            flex: 0 0 calc(50% - 1rem);
    margin-right: 1rem;
  }
}
@media (min-width: 51em) {
  .teaser {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.3% - 1rem);
            flex: 0 0 calc(33.3% - 1rem);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Cut the corner ) is write by Tom, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Tom

More from Tom

You Might Also Like