wklęsły kształt granica

Question

Próbuję utworzyć ten kształt w CSS/SVG:

Problemem jest to, że biała część muszą być przejrzyste. Jak to zrobić w CSS/SVG? Potrzebuję też zawisu na kształcie.

#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

Można używać svg kwadratowego ścieżkę bezier stworzyć taki kształt.

<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

To musiałby trochę skomplikowany, ale może być w stanie używać coś takiego.

Wykorzystuje dwa elementy (rodzic i dziecko) w celu wygenerowania kształtu, którego szukasz. To działałoby w przypadku tła gradientowego, chociaż testowanie trafień byłoby nieco opóźnione ze względu na sposób, w jaki zostało wygenerowane.

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

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