CSS3 curved cutout from div?

Question

Is there a way to create a cutout in a div with CSS3 like in the example below?

Answer 1

You may have to simplfiy your design, but a similar effect is possible using gradients and pseudo-elements.

Demo

body{background: salmon;}
.main {background:gray; width:300px; height:200px; position: relative; margin-top:20px;}
.main:after, .main:before{content:''; width: 50px; height: 20px; background: inherit; position: absolute; }
.main:after{ top:-20px; left:0;}
.main:before{ top:-20px; right:0;}

.phone{width:175px; height:40px; background: gray; margin-left:62.5px; border-radius: 50px; text-align: center; line-height: 40px; position: relative;}

.phone:after,.phone:before{content:''; width:20px; height:20px; background:red; position: absolute;}

.phone:before{bottom:-20px; left:-12px; background: -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, gray 15px);}
.phone:after{bottom:-20px; left:168px; background: -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, gray 15px);}