<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%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.