<div class="container">
  <div class="block block-a">
    <div class="block block-b">
      <div class="block block-c"></div>
    </div>
  </div>
</div>
$color: #9000fe ;
$color-range: 15%;

body {
  font-family: "Trebuchet MS";
  background-color: #eee;
}
.container {
  border: 1px solid #ccc ;
  min-height: 250px;
  margin : 20px;
  position: relative;
  background-color: $color;
}
.block {
  position: absolute;
  width: 50%;
  height: 50%;
}
.block-a {
  top: 10%;
  right: 10%;
  background-color: lighten($color,$color-range);
}
.block-b {
  bottom: 10%;
  left: 10%;
  background-color: lighten($color,$color-range*2);
}
.block-c {
  top: 10%;
  right: 10%;
  background-color: lighten($color,$color-range*3);
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.