<div class="container">
  <div class="positionC"><p>0 / 100</p></div>
  <div class="positionTL"><p>25 / 75</p></div>
  <div class="positionTR"><p>50 / 50</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,
      yellow 25%,
      red 75%
    );
}

.positionTR {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle,
      yellow 50%,
      red 50%
    );
}