凹形边界

Question

我想在CSS/SVG中创建这个形状:

问题是白色部分需要透明.我如何在CSS/SVG中做到这一点？我还需要悬停在形状上.

#shape {
  height: 400px;
  width: 400px;
  background: black;
  overflow: hidden;
}
#circle1,
#circle2,
#circle3,
#circle4 {
  background: white;
  height: 800px;
  width: 800px;
  border-radius: 50%;
  position: relative;
}
#circle1 {
  top: -200px;
  right: -340px;
}
#circle2 {
  top: -1000px;
  left: -740px;
}
#circle3 {
  top: -2350px;
  left: -200px;
}
#circle4 {
  top: -2050px;
  left: -200px;
}
#shape:hover {
  background: red;
}

<div id="shape">
  <div id="circle1">
  </div>
  <div id="circle2">
  </div>
  <div id="circle3">
  </div>
  <div id="circle4">
  </div>
</div>

Answer 1

您可以使用svg二次贝塞尔曲线路径来创建这样的形状.

<svg version="1.1" height="400" width="400" viewBox="0 0 10 10">
  <defs>
    <style type="text/css">
      path:hover {
        fill: blue;
        transition: 0.5s ease;
      }
      path {
        transition: 0.5s ease;
      }
    </style>
  </defs>
  <path d="M0 0 Q5 3 10 0 7 5 10 10 5 7 0 10 3 5 0 0" stroke="none" fill="red" />
</svg>