<img src="https://picsum.photos/id/1040/300/200" alt="a house on the top of a mountain">
<img src="https://picsum.photos/id/211/200/200" style="--r:15px" alt="a boat">
<img src="https://picsum.photos/id/193/150/200" style="--r: 5px" alt="a castle">
img {
--r: 10px; /* control the radius of the circles */
padding: calc(2*var(--r));
filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
background:
radial-gradient(var(--r),#0000 98%,#fff) round
calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
linear-gradient(#fff 0 0) no-repeat
50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
grid-gap: 30px;
background: pink;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.