Child element with gradient that is clipped to the height of the parent container

by Konstantin Rouda

HTML

<article class="c-container">
  <div class="c-elem"></div>
</article>

CSS

.c-container {
  width: 640px;
  height: 320px;
  margin: 8rem auto 0;
  border: 1px solid red;
}

/**
  1. Height of the parent container
  2. The second parameter inside the calc() function is equal to the half of the element's height
**/
.c-elem {
  height: 320px; /*[1]*/
  width: 320px; /*[1]*/
  background: linear-gradient(-45deg, #ffff0000 calc(50% - 160px), #84b0ff 0, #1ad92c calc(50% + 160px), #00800000 0); /*[2]*/
  border: 1px solid #201c1c;
  transform: rotate(45deg);
}

JavaScript

/*
from: https://css-tricks.com/restricting-a-pseudo-element-to-its-parents-border-box/#restrict-gradient
*/