<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
.outer {
width: 510px;
height: 210px;
background-color: lightgrey;
position: relative;
}
.box1 {
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
background-color: pink;
box-sizing: border-box;
transform: scale(0.6);
}
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
box-sizing: border-box;
border: 1px dashed black;
}
.box2 {
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 470px;
height: 170px;
background-color: lightgreen;
border: 1px solid green;
box-sizing: border-box;
transform: scale(0.6);
}
position: absolute;
top: 30px;
left: 30px;
width: 470px;
height: 170px;
border: 1px dashed black;
box-sizing: border-box;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.