<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.