Início / user-2518285

Brett Donald's questions

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

Quero fazer com que um elemento pareça uma placa “fazendo furos” perto de seus cantos para que a imagem de fundo fique visível por trás.

um quadrado arredondado com buracos nos cantos

O elemento é responsivo, podendo ser retrato, quadrado ou paisagem, mas à medida que seu formato se ajusta, os furos em seus cantos precisam permanecer circulares. O tamanho dos furos deve ser responsivo - de preferência proporcional a vmin.

Este trecho é meu ponto de partida.

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>

Eu sei que poderia chegar perto com uma imagem de fundo SVG ou com uma máscara SVG, mas nenhuma dessas soluções permite que os furos permaneçam circulares.

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