Circular "Cut-away" von oben nach div mit CSS

Question

Ich versuche, das folgende Layout in CSS zu erstellen.

Dieses in der Regel jedoch zu tun wären einfach, da der Hintergrund ein Bild ist (dargestellt in meinem Bild als Gradient), ich kann nicht einfach einen absoluten positionierte div an der Spitze hinzufügen und Farbe der "wegschneiden". Ich habe mich in den letzten Stunden darum gekümmert, wie ich das machen soll.

Ich habe einige Beispiele mit den ::before und ::after Pseudo Selektoren nachgeschlagen, kann aber nicht herausfinden, wie es funktioniert, während der Randradius auf dem Hauptinhalt div (blau) gehalten wird.

<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

Sie einen Pseudo-Schatten verwenden können und eine hudge Feld Hintergrund-Farbe zu malen und eine Kurve abgeschnitten.

Für das Nav oben kann flex es leicht tun.

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

Answer 2

Radial-Gradienten für die Rettung!

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