Cut the corner

In this example below you will see how to do a Cut the corner with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by webrocker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright webrocker ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/webrocker/cut-the-corner-aBBNLj */
.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: 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: flex;
  flex-flow: row no-wrap;
  margin-bottom: 1rem;
}

.teaser__content {
  padding: 1em;
  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: '';
  flex: 0 0 12%;
  background-size: 280px 600px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(103deg, #F90 36%, transparent 36.5%);
}
.teaser--one > .teaser__content {
  background-color: #F90;
}
.teaser--one::after {
  background-image: linear-gradient(103deg, #F90 36%, transparent 36.2%);
}
.teaser--two > .teaser__content {
  background-color: #FC0;
}
.teaser--two::after {
  background-image: linear-gradient(103deg, #FC0 36%, transparent 36.2%);
}
.teaser--three > .teaser__content {
  background-color: #C9D;
}
.teaser--three::after {
  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: flex;
    flex-flow: row wrap;
    margin-right: -1rem;
  }

  .teaser {
    flex: 0 0 calc(50% - 1rem);
    margin-right: 1rem;
  }
}
@media (min-width: 51em) {
  .teaser {
    flex: 0 0 calc(33.3% - 1rem);
  }
}

Comments