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