html - div - Múltiples círculos transparentes que usan solo CSS(recortes)
title html (4)
Solo usa un svg. La parte negra de la máscara se elimina del elemento al que se aplica y se mantiene blanca:
html, body {
height: 100%;
margin: 0;
background: linear-gradient(to top, red, blue);
}
svg {
display: block;
width: 150px;
}
<svg viewBox="0 0 150 150">
<mask id="circles" maskUnits="objectBoundingBox">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="40" cy="40" r="15" fill="black" />
<circle cx="80" cy="40" r="15" fill="black" />
<circle cx="70" cy="80" r="15" fill="black" />
</mask>
<rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" />
</svg>
He leído ya esta gran pregunta Círculo hueco o recortado transparente, pero quiero dibujar más círculos (digamos tres).
Así que traté de usar un elemento extra para el círculo en lugar de un pseudo-elemento (para poder agregar más) y funciona para un círculo pero no para más. El problema es que no son transparentes ya que el último cubre todo. Aquí está mi intento:
body{
background-color:violet;
}
.shape{
height: 150px;
width: 150px;
position:relative;
overflow:hidden;
}
.hole{
position:absolute;
border-radius:100%;
width:30px; height:30px;
color:red;
box-shadow: 0px 0px 0px 2000px black;
}
.hole:nth-child(1) {
left:25px; top:25px;
}
.hole:nth-child(2) {
left:65px; top:25px;
}
.hole:nth-child(3) {
left:55px; top:65px;
}
<div class="shape">
<div class="hole">1</div>
<div class="hole">2</div>
<div class="hole">3</div>
</div>
Puede usar los valores de color de rgba especificando la opacidad en lugar de usar un solo color para que su sombra de cuadro tenga el efecto deseado.
Pruebe box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0 , 0.1);
<!DOCTYPE html>
<html>
<head>
<style>
.shape{
height: 150px;
width: 150px;
position:relative;
overflow:hidden;
background-color:#333333;
}
.hole{
position:absolute;
border-radius:20px;
width:20px;
height:20px;
color:red;
background-color:white;
opacity:0.6; /* for transparency levels change between 0=invisible and 1=opaque */
text-align:center;
}
.hole:nth-child(1) {
left:25px; top:25px;
}
.hole:nth-child(2) {
left:65px; top:25px;
}
.hole:nth-child(3) {
left:55px; top:65px;
}
</style>
</head>
<body>
<div class="shape">
<div class="hole">1</div>
<div class="hole">2</div>
<div class="hole">3</div>
</div>
</body>
</html>
Si realmente quieres hacer esto con CSS y si no tienes miedo a las sombras de cuadros múltiples , puedes hacer esto PERO debes saber que esto está codificado y que los valores de box-shadow deben actualizarse cuando cambien los circulos. posición, tamaño o número.
Aquí hay un ejemplo del enfoque que puede usar, los valores para la sombra de la caja deben ser "optimizados":
body {
background: url(''https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'');background-size:cover;
}
.shape {
height: 150px;
width: 150px;
position: relative;
overflow: hidden;
}
.hole {
position: absolute;
border-radius: 100%;
width: 30px;
height: 30px;
color: red;
}
.hole:nth-child(1) {
left: 25px;
top: 25px;
box-shadow: -38px -33px 0px 55px black, 9px 14px 0px 0px black;
}
.hole:nth-child(2) {
left: 65px;
top: 25px;
box-shadow: 76px -63px 0px 100px black, -7px 6px 0px 0px black;
}
.hole:nth-child(3) {
left: 55px;
top: 65px;
box-shadow: -3px 91px 0px 100px black;
}
<div class="shape">
<div class="hole">1</div>
<div class="hole">2</div>
<div class="hole">3</div>
</div>
Aparte de eso, recomendaría usar SVG con enmascaramiento / recorte o con una ruta como se muestra en la respuesta a la que se vinculó. Aquí hay un ejemplo con varios círculos transparentes recortados que usan el elemento path con el comando arc:
body{background: url(''https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'');background-size:cover;}
svg{
display:block;
width:70%;
height:auto;
margin:0 auto;
}
path{
transition:fill .5s;
fill:#E3DFD2;
}
<svg viewbox="-10 -1 30 15">
<path d="M-10 -1 H30 V15 H-10z
M 5 5 m -5, 0
a 5,5 0 1,0 10,0
a 5,5 0 1,0 -10,0
M-3 10 m -2, 0
a 2,2 0 1 ,0 4,0
a 2,2 0 1 ,0 -4,0
M15 8 m -2, 0
a 2,2 0 1 ,0 4,0
a 2,2 0 1 ,0 -4,0
M-5 5 m -2, 0
a 2,2 0 1 ,0 4,0
a 2,2 0 1 ,0 -4,0"/>
</svg>
El código anterior se crea para que cada círculo en el elemento de ruta se "dibuje" con:
M cx cy m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
El centro del círculo es cx, cy y r es su radio. Vea esta respuesta para una explicación.
La primera línea ( M-10 -1 H30 V15 H-10z ) está hecha para hacer que el rectángulo circundante y cada círculo "lo corte".
La ventaja de este enfoque es que funciona para todos los navegadores compatibles con svg en línea. Incluso aquellos que no admiten enmascaramiento o recorte.
Para entender cómo funciona esto, debe echar un vistazo a:
- SVG en HTML (en línea)
- el comando de ruta
- y específicamente el comando de arco