我想让一个元素看起来像一个牌匾，通过在它的角落附近钻洞，这样背景图像就可以在后面看到.
该元素是敏感的，所以它可以是肖像，正方形或风景，但随着其形状的调整，其角落的孔需要保持圆形.孔的大小应该是响应，虽然-最好是成比例的vmin.
这个片段是我的起点.
body {
margin: 0;
background-image: url(http://picsum.photos/id/167/1000);
background-size: cover;
height: 100svh;
display: flex;
justify-content: center;
align-items: center;
font-family: cursive;
font-size: 7vmin;
}
.d1 {
background-color: goldenrod;
color: white;
width: 60vw;
height: 60vh;
border-radius: 4vmin;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<div class="d1">Roses are red,<br>violets are blue.</div>我知道我可以使用SVG背景图像或SVG蒙版接近，但这两种解决方案都不允许孔洞保持圆形.
body {
margin: 0;
background-image: url(http://picsum.photos/id/167/1000);
background-size: cover;
height: 100svh;
display: flex;
justify-content: center;
align-items: center;
font-family: cursive;
font-size: 7vmin;
}
.d1 {
background-color: goldenrod;
color: white;
width: 60vw;
height: 60vh;
border-radius: 4vmin;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="15" cy="15" r="5"/><circle cx="185" cy="15" r="5"/><circle cx="15" cy="185" r="5"/><circle cx="185" cy="185" r="5"/></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
-webkit-mask-composite: destination-out;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="15" cy="15" r="5"/><circle cx="185" cy="15" r="5"/><circle cx="15" cy="185" r="5"/><circle cx="185" cy="185" r="5"/></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
mask-composite: exclude;
}<div class="d1">Roses are red,<br>violets are blue.</div>