<div class="container">
  <div class="positionC"><p>center</p></div>
  <div class="positionTL"><p>top | left</p></div>
  <div class="positionTR"><p>top | right</p></div>
  <div class="positionBC"><p>bottom | center</p></div>
</div>

.container {
  width:100%;
  display:flex;
  font-weight:bold;
  text-transform:uppercase;
  color:brown;
  font-size:11px;
}
.positionC, .positionTL, .positionTR, .positionBC {
  display:flex;
  justify-content:center;
  align-items:center;
  width:25%;
  height:150px;
  margin:0 10px
}
.positionC {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle,
      yellow,
      red
    );
}

.positionTL {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle at top left,
      yellow,
      red
    );
}

.positionTR {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      red
    );
}
.positionBC {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle at bottom center,
      yellow,
      red
    );
}