Concave border

Question

I am trying to create this form in CSS / SVG:

The problem is that the white part should be transparent. How to do it in CSS / SVG? I also need to hover over the shape.

#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

You can use the bezier svg quadratic path to create such a shape.

 <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

This will require some customization, but you can use something like this.

It uses two elements (parent and child) to generate the form you are looking for. This will work with a gradient background, although hit testing will be somewhat released due to the way it was generated.

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