konkave Form Grenze

Question

Ich versuche, diese Form in CSS/SVG zu erstellen:

Das Problem ist, dass weißer Teil transparent sein muß. Wie mache ich das in CSS/SVG? Ich muss auch auf Form schweben.

#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

Sie svg quadratische Bezier-Pfad verwenden kann, eine solche Form zu erstellen.

<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

Dies würde einige Optimierungen benötigen, aber Sie können in der Lage sein, so etwas zu verwenden.

Es verwendet zwei Elemente (ein Elternteil und ein Kind), um die gesuchte Form zu erzeugen. Dies würde mit einem Hintergrund mit Farbverlauf funktionieren, obwohl die Trefferprüfung aufgrund der Art und Weise, wie sie generiert wurde, etwas ausfällt.

.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>