<div class="parent">
<div class="child1 all">1</div>
<div class="child2 all">2</div>
<div class="child3 all">3</div>
<div class="child4 all">4</div>
</div>
.parent{
background-color: #876445;
height: 100vh;
border: 2px solid;
position: relative;
}
.all{
height: 50px;
width: 50px;
}
.child1{
background-color: #612897;
margin: 3px;
position: absolute;
left: 0px;
top: 0px;
}
.child2{
background-color: #D22779;
margin: 3px;
position: absolute;
right: 0px;
top: 0px;
}
.child3{
background-color: #0C1E7F;
margin: 3px;
position: absolute;
bottom: 0px;
left: 0px;
}
.child4{
background-color: #FFC900;
margin: 3px;
position: absolute;
bottom: 0px;
right: 0px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.