Circular "cut-away" from top of div using CSS [duplicate] - html

Question

This question already has answers here:
CSS3 curved cutout from div?
(2 answers)
Closed 6 years ago.
I'm trying to create the following layout in CSS.
This would usually be easy to do, however because the background is an image (illustrated in my image as a gradient), I can't simply add a absolute positioned div at the top and color the 'cut away'. I've been struggling to work out how to do this for the last few hours.
I've looked up some examples using the ::before and ::after pseudo selectors, however can't work out how do it while keeping the border radius on the main content div (blue).
<div class="content">
<div class="header">
<a class="left" href="#">LINK 1</a>
<!--
Stuck with how to position this so it clips
<img class="logo" src="https://placehold.it/100x100">
-->
<a class="right" href="#">LINK 2</a>
</div>
<p>Some text content</p>
.content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: blue;
height: 300px;
width: 400px;
padding: 20px;
}
.header {
position: relative;
top: -50px;
padding: 0 20px;
}
.header .right {
float: right;
}
Demo: http://jsbin.com/saxunecidu/1/edit?html,css,output

Answer 1

Radial gradient for rescue!
#test{
padding:10px;
background:rgb(100,100,240);
color:white;
font-size:25px;
-webkit-mask-image: radial-gradient(circle at top, transparent 30px, black 31px);
border-radius:15px;
width:600px;
height:150px;
margin:10px;
}
body{
background: radial-gradient(lightgrey,black);//just an example gradient
}
<div id="test">Something there</div>

Answer 2

You may use a pseudo and a hudge box shadow to paint background-color and cut off a curve.
For the nav on top, flex can easily do it.
.cut {
margin: 1em auto 1em;
padding :40px 1em 1em;
color:white;
height: 75vh;
/* demo purpose */
width: 70vw;
/*demo purpose */
border-radius: 1em;
overflow: hidden;
position:relative;
}
.cut:before {
content:'';
width:80px;
border-radius:50%;
height:80px;
display:block;
margin:-80px auto 0;
box-shadow:0 0 0 3000px #2D3E50
}
.rd {
display: flex;
/* demo purpose */
width: 70vw;
margin: 1em auto -45px;;
border-radius: 50%;
}
.rd img {
margin :0 auto ;
flex-shrink:0;
border-radius:50%;
}
.rd a {
margin: 0 auto auto; /* put links at top */
}
body {
background:linear-gradient(to top, #ccc,#999);
<nav class="rd"><a href >link</a> <img src="http://dummyimage.com/60x60/464646/&text=image" /><a href >link</a>
</nav>
<div class="cut">
content in here to set away from curve
</div>