主页 / user-2518285

Brett Donald's questions

Martin Hope
Brett Donald
Asked: 2023-11-16 07:06:55 +0800 CST
  • 7

我想通过在其角落附近“钻孔”来使元素看起来像一块牌匾，以便背景图像在后面可见。

角上有孔的圆角正方形

该元素是响应式的，因此它可以是纵向、方形或横向，但随着其形状的调整，其角上的孔需要保持圆形。不过，孔的大小应该具有响应性——最好与 成比例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>

css