следующее - мое понимание ...
Вы можете сделать это с одним элементом и некоторым градиентом, но без прозрачности:
.box {
width:200px;
height:100px;
border-radius:20px;
padding:5px;
background:
linear-gradient(#fff,#fff) content-box,
linear-gradient(red,red) top left /60px 40px,
linear-gradient(blue,blue) top right /60px 40px,
linear-gradient(green,green) bottom left /60px 40px,
linear-gradient(purple,purple) bottom right/60px 40px;
background-repeat:no-repeat;
}
<div class="box"></div>