Negative Border Radius in CSS?

Question

I\'m trying to do CSS to make a div that looks like this:

I\'m pretty much started with this:

.player {
    width: 480px;
    height: 80px;
    bord         


        

Answer 1

You can use the before pseudo element to provide the "cut out"

.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: '';
}

Some Content