Início / coding / Perguntas / 77491404
Accepted
Brett Donald
Asked: 2023-11-16 07:06:55 +0800 CST

Como posso fazer furos em um elemento para ver a imagem de fundo abaixo?

  • 772

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

1 respostas

  1. Best Answer

    Use uma coloração gradiente radial. Não há necessidade de máscara

    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;
}

.d1 {
  --r: 2vmin; /* radius */
  color: white;
  width: 60vw;
  height: 60vh;
  border-radius: var(--r);
  border: var(--r) solid goldenrod; /* the outer space*/
  background: 
   radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,goldenrod)
   0 0/calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
  
  box-sizing: border-box;
}
    <div class="d1"></div>

    • 5

relate perguntas