JSFiddle - React, Tailwind, and code Playground

by Ron Valstar

HTML

<div class="layers">
  <div class="layered"></div>
  <div class="layered2"></div>
</div>

SCSS

$size: 16rem;
.layers {
  display: flex;
}
.layered {
  position: relative;
  width: $size;
  height: $size;
  background: #EEE;
  &:before, &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    //border: 1px dashed #333;
    box-shadow: 0 0 0 1px #333;
  }
  &:before {
    transform: scale(0.9) scale(0.7,0.35) translateY(#{0.25*$size}) rotate(-45deg);
    background-image: linear-gradient(90deg, white, red);
  }
  &:after {
    transform: scale(0.9) scale(0.7,0.35) translateY(-#{0.25*$size}) rotate(-45deg);
    background-image: linear-gradient(0deg, black, transparent);
  }
}
.layered2 {
  width: $size;
  height: $size;
  background-image: linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, red);
}