Как сделать часть блока прозрачным?

Question

У меня вот такой код:

body {
  background-color: red;
}

.parent {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #000;
}

.box {
  height: 30px;
  width: 30px;
  position: absolute;
  background-color: #ccc;
  /*    background-color: transparent;  */
  left: 50%;
  border-radius: 100px;
  transform: translateX(-50%);
}

<div class="parent">
  <div class="box"></div>
</div>

Белый круг должен быть прозрачным (в данном случае, красным), но background: transparent не работает.

Answer 1

body {
  background: red;
}

.container {
  width: 320px;
  height: 220px;
  position: relative;
}

.shape {
  width: 320px;
  height: 220px;
  background-color: transparent;
  background-image: -webkit-radial-gradient(50% 0, circle, transparent 50px, black 0);
  background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
  margin-top: 50px;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 2px solid blue;
  border-radius: 50px;
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="shape"></div>
  <div class="circle"></div>
</div>

jsfiddle.net/create_1/m27sopt4/5/

Answer 2

Мои "пять копеек":

body { background-color: red } 
#hed { display: block; margin: auto; padding: 5px; 
       text-align: center; font: bold italic 120% arial;}
#hed::before { position: absolute; z-index: 10; top: 45%; left:2%; right:2%; 
               content: "Мышкуем здесь:"; color: #bbb; 
  border-radius: 50px; border: 2px solid #aaa;
background: linear-gradient(to top, #600, #666, #acc);} /*  */
.parent:hover 
#hed::after { position: absolute; z-index: 12; top: 44%; left:2%; right:2%; 
              content: attr(data-title); color:#6ee; 
  border-radius: 50px; border: 2px solid #aaa;
background: linear-gradient(to top, #600, #666, #acc);
            } /*  */
.parent { position: relative; z-index: 0; width: 200px; height: 200px; 
          margin: 10vh auto; cursor: pointer;
  background-image: 
  -webkit-radial-gradient(0% 0%,     circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(100% 0%,   circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(0% 100%,   circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(100% 100%, circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%);
}
.box {display: none;} .parent:hover 
.box { display: block; position: absolute; text-align: center; z-index:1;
       width: 50%; height: 50%;
       border-radius: 50%; border: 2px solid #ccc;
       background-image: 
       -webkit-radial-gradient( 50% 50%, circle, #cffe 1px, #000e 50px, #f000 52px );
     }
#a,#b {top: -25%;}   #a,#c {left: -25%;}
#b,#d {right: -25%;} #c,#d {bottom: -25%;}

<div class="parent"><h3 id="hed" data-title="✿ —Спасибо!— ✿"></h3>
  <div class="box" id="a"></div><div class="box" id="b"></div>
  <div class="box" id="c"></div><div class="box" id="d"></div>
</div>

Можно и в центре вырезать кружочек, в этом случае стиль чуток увеличится:

body { background-color: red } 

.parents { position: relative; z-index: 0; width: 200px; height: 200px; 
           margin: 10vh auto; cursor: pointer;
  background: 
  -webkit-radial-gradient(0 50%,     circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 0,     circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(100% 50%,  circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 100%,  circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 50%,   circle, #fff0 32%, #000 32%, #000 68%, #0000 68%),
  -webkit-radial-gradient(0 0,       circle, #fff0 16%, #000 16%, #000 34%, #0000 34%),
  -webkit-radial-gradient(100% 0,    circle, #fff0 16%, #000 16%, #000 34%, #0000 34%),
  -webkit-radial-gradient(0 100%,    circle, #fff0 16%, #000 16%, #000 34%, #0000 34%),
  -webkit-radial-gradient(100% 100%, circle, #fff0 16%, #000 16%, #000 34%, #0000 34%);}
.boxes {display: none;} .parents:hover /* display: none; */
.boxes { display: block; position: absolute; z-index:1;
        width: 50%; height: 50%; padding: 0; text-align: center;
        border-radius: 50%; border: none;
  background-image: 
  -webkit-radial-gradient( 50% 50%, circle, #fff 0, #666f 64%, #ccc0 65%, #0000 60px)
       }
#ee {top: 25%; left: 25%;} /*  */
#aa, #bb {top: -25%;}   #aa,#cc {left: -25%}
#bb,#dd {right: -25%} #cc,#dd {bottom: -25%}

<div class="parents"><div class="boxes" id="ee">ee</div>
  <div class="boxes" id="aa">aa</div><div class="boxes" id="bb">bb</div>
  <div class="boxes" id="cc">cc</div><div class="boxes" id="dd">dd</div>
</div>

— Как сумел...

Answer 3

Как я уже и говорил, Вам нужно использовать возможности SVG. Штатные средства CSS не могут вычитать фигуры.

Поэтому нужно нарисовать Вашу фигуру, например, в Figma (там возможность вычитания фигур есть) и получить SVG:

body {
  background-color: red;
}

<svg width="302" height="374" viewBox="0 0 302 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M302 0H0V374H302V0ZM151.5 66C165.031 66 176 55.031 176 41.5C176 27.969 165.031 17 151.5 17C137.969 17 127 27.969 127 41.5C127 55.031 137.969 66 151.5 66Z" fill="#000"/>
</svg>

Answer 4

body {
  background-color: red;
}

.parent {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  overflow:hidden;
}

.box {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 50%;
  border-radius: 100px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 520px black;
}

<div class="parent">
  <div class="box"></div>
</div>

БЛОГ НА HUSL

Как сделать часть блока прозрачным?

Ответы (4 шт):