Ranh giới hình dạng lõm

Question

Tôi đang cố gắng tạo hình dạng này trong CSS/SVG:

Vấn đề là phần màu trắng cần phải trong suốt. Làm thế nào để làm điều đó trong CSS/SVG? Tôi cũng cần di chuột trên hình dạng.

#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

Bạn có thể sử dụng svg đường Bezier bậc hai để tạo ra một hình dạng như vậy.

<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

này sẽ cần một số tinh chỉnh, nhưng bạn có thể sử dụng một cái gì đó như thế này.

Nó sử dụng hai yếu tố (một phụ huynh và một đứa trẻ) để tạo ra hình dạng bạn đang tìm kiếm. Điều này sẽ làm việc với một nền gradient, mặc dù hit-thử nghiệm sẽ được phần nào tắt do cách nó được tạo ra.

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