Negativer Randradius in CSS?

Question

Ich versuche, CSS zu tun, ein div zu machen, die wie folgt aussieht:

Ich bin mit dieser ziemlich begonnen:

.player { 
    width: 480px; 
    height: 80px; 
    border-radius: 40px; 
} 

Was ist der einfachste Weg, dies zu tun, ohne zu viel Code?

Answer 1

Sie können das before Pseudoelement das schaffen "ausgeschnitten"

.player { 
 
    width: 480px; 
 
    height: 80px; 
 
    border-radius:0 40px 40px 0; 
 
    background-color:#0000FF; 
 
    position:relative;  
 
    color:#FFF; 
 
} 
 

 
.player:before 
 
{ 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius:0 40px 40px 0; 
 
    background-color:#FFF;  
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    margin-right: 10px; 
 
    content: ''; 
 
}

<div class="player">Some Content</div>

Answer 2

.wrapper { 
 
    width: 500px; 
 
    height: 103px; 
 
    background-color: red; 
 
    padding-top: 15px; 
 
} 
 

 
.player { 
 
    width: 480px; 
 
    height: 83px; 
 
    margin-left: 10px; 
 
    border-top-right-radius: 40px; 
 
    border-bottom-right-radius: 40px; 
 
    border: 1px solid black; 
 
    border-left: none; 
 
    background-color: blue; 
 
    -webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 40px, black 41px); 
 
}

<div class="wrapper"><div class="player"></div></div>

Answer 3

Hier yet another way of doing it, diesmal einen radialen Hintergrundbild verwenden . Dies macht es transparent und funktioniert sowohl in Firefox als auch in Chrome.

.player { 
    width: 480px; 
    height: 80px; 
    border-radius:40px; 
    background-image: radial-gradient(circle at 38px 40px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40px, blue 40px); 
    color:#FFF; 
}