凹形边界

Question

我正在尝试在CSS / SVG中创建此形状：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

这需要一些调整，但你可以使用这样的东西。

它使用两个元素（父元素和子元素）来生成您要查找的形状。这将适用于渐变背景，尽管由于它的生成方式，点击测试会稍微偏离。

＆＃13;

＆＃13;

.one {
  height: 100px;
  width: 100px;
  margin: 100px;
  position: relative;
  overflow: hidden;
}
.two {
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  background: red;
}
.one:before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0%;
  height: 50%;
  top: -42%;
  border-radius: 50%;
  border-bottom: 30px solid red;
}
.two:before {
  content: "";
  position: absolute;
  height: 200%;
  top: -50%;
  width: 100%;
  left: -136%;
  border-radius: 50%;
  border-right: 30px solid red;
}
.two:after {
  content: "";
  position: absolute;
  height: 200%;
  top: -50%;
  width: 100%;
  right: -136%;
  border-radius: 50%;
  border-left: 30px solid red;
}
.one:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0%;
  height: 50%;
  bottom: -42%;
  border-radius: 50%;
  border-top: 30px solid red;
}

/*FOR DEMO ONLY*/


.one:hover:before{border-bottom-color:blue;}
.one:hover:after{border-top-color:blue;}
.one:hover .two{background:blue;}
.one:hover .two:before{border-right-color:blue;}
.one:hover .two:after{border-left-color:blue;}
.one,.two,.one:before,.one:after,.two:before,.two:after{transition:all 0.6s;}

html {
  height: 100%;
  background: rgb(79, 79, 79);
  background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}

＆＃13;

<div class="one">
  <div class="two"></div>
</div>

＆＃13;

＆＃13;

＆＃13;