<div class="box">
</div>
<div class="box">
</div>
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
background-color: #8cffa0;
mask-image: url(https://hsto.org/webt/63/22/f2/6322f2f0b4422699382932.png);
mask-image: url(https://hsto.org/webt/63/22/f2/6322f2f0b4422699382932.png);
mask-repeat:no-repeat;
mask-repeat:no-repeat;
mask-size: calc(20vw + 20vh);
mask-size: calc(20vw + 20vh);
width: calc(20vw + 20vh);
height: calc(20vw + 20vh);
}
.box:nth-child(2) {
background-color: tomato;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.