<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.container {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.container > div {
clip-path: xywh(0 0 100% 100% round 15px);
flex: 1 1 30%;
height: 150px;
}
.container > div:before {
background-repeat: no-repeat;
background-image: url('https://habrastorage.org/webt/67/2e/54/672e542340b84860602626.png');
background-size: cover;
background-position: 50%;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: -1;
content: "";
}
html {
min-height: 100%;
background: linear-gradient(45deg, #797, #227)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.