<div class="parent-container">
<div class="box-original">
<div class="box-1"> </div>
</div>
<div class="box-original">
<div class="box-2"> </div>
</div>
<div class="box-original">
<div class="box-3"> </div>
</div>
</div>
.parent-container {
padding 10px;
height: 90vh;
background: lightgreen;
}
.box-original {
border: 1px dotted gray;
background-color: lightgray;
width: 100px;
height: 100px;
text-align: center;
align-self: center;
margin: 10px;
}
.box-1 {
border: 1px solid red;
background-color: #111111;
width: 100px;
height: 100px;
text-align: center;
align-self: center;
margin-left: -1px;
margin-top: -1px;
}
.box-2 {
position: relative;
top: 10px;
left: 10px;
border: 1px solid red;
background-color: mediumpurple;
width: 100px;
height: 100px;
text-align: center;
align-self: center;
margin-left: -1px;
margin-top: -1px;
}
.box-3 {
border: 1px solid red;
background-color: #111111;;
width: 100px;
height: 100px;
text-align: center;
align-self: center;
margin-left: -1px;
margin-top: -1px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.