<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.