SOURCE

<div class="box-container">
  <div class="shadow-ouset">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
  <div class="shadow-left"></div>
  <div class="shadow-ouset step-ini">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
  <div class="shadow-left"></div>
  <div class="shadow-ouset step-spread">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
  <div class="shadow-left"></div>
  <div class="shadow-ouset step-offset">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
  <div class="shadow-left"></div>
  <div class="shadow-ouset step-blur">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
  <div class="shadow-left"></div>
  <div class="shadow-ouset step-end">
    <div class="shadow-ouset-son"></div>
    <div class="son2"></div>
  </div>
</div>

.box-container {
  padding: 20px;
  display:flex;
  flex-wrap: wrap;
}
.box-container .shadow-ouset {
    display: inline-block;
    width: 200px;
    height: 150px;
    border: solid 5px;
    position: relative;
    background-color: #b3d9ff;
    margin: 50px;
}
.box-container .shadow-ouset .son2 {
    display: none;
    width: 200px;
    height: 150px;
    background-color: #b3d9ff;
    border-right: solid 5px;
    border-bottom: solid 5px;
    position:absolute;
}
.box-container .shadow-ouset .shadow-ouset-son {
    display: inline-block;
    height: 150px;
    width: 200px;
    box-sizing:border-box;
    background-color: #ff6666;
    opacity: 0;
    position:absolute;
}
.box-container .shadow-ouset.step-ini .shadow-ouset-son {
  opacity: 0.8;
}
.box-container .shadow-ouset.step-spread .shadow-ouset-son {
  height: 190px;
  width: 240px;
  top: -20px;
  left:-20px;
  opacity: 0.8;
}
.box-container .shadow-ouset.step-offset .shadow-ouset-son,
.box-container .shadow-ouset.step-end .shadow-ouset-son,
.box-container .shadow-ouset.step-blur .shadow-ouset-son {
  opacity: 0.8;
  height: 190px;
  width: 240px;
  top: 20px;
  left: 20px;
}
.box-container .shadow-ouset.step-blur .shadow-ouset-son,
.box-container .shadow-ouset.step-end .shadow-ouset-son {
  box-shadow: 8px 8px 8px 0 #ff6666;
}
.box-container .shadow-ouset.step-end .son2 {
  display: inline-block;
  z-index: 2;
}
.shadow-left {
  width:50px;
  margin-left:20px;
  position:relative;
}
.shadow-left:before {
  content:"";
  display:inline-block;
  width:100%;
  height:4px;
  background-color:#666;
  position:absolute;
  top:50%;
  margin-top:-2px;
}
.shadow-left:after {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border:solid 3px #666;
  border-color: #666 #666 transparent transparent;
  position:absolute;
  top:50%;
  right:0%;
  margin-top:-6px;
  transform:rotate(45deg);
}