<div class="orange-dark">
  <div class="orange-coral">
    <div class="orange-light"></div>
  </div>
</div>
/* orange-dark with vw/vh */
.orange-dark {
  margin: auto;
  width: 50vw;
  height: 50vh;
  background-color: #f76f24;
}

/* orange-coral with % */
.orange-coral {
  width: 80%;
  height: 100%;
  background-color: #f58a30;
  margin: auto;
  opacity: 0.8;
  border: 6px dashed #faa237;
  box-sizing: border-box;
}

/* orange-light with vw/vh */
.orange-light {
  width: 25vw;
  height: 70vh;
  background-color: #faa237;
  margin: auto;
  border: 6px solid #f76f24;
  opacity: 0.9;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.