<div class="item"><div>
.item {
position: relative;
width: 200px;
height: 110px;
margin: 10%;
overflow: hidden;
&::after {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background:
linear-gradient(#399953, #399953) no-repeat,
linear-gradient(#fbb300, #fbb300) no-repeat,
linear-gradient(#d53e33, #d53e33) no-repeat,
linear-gradient(#377af5, #377af5) no-repeat;
background-size: 50% 50%, 50% 50%,50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.