Negative Border Radius in CSS?

user_471191 0
Viewed 28612

I'm trying to do CSS to make a div that looks like this: negative left margin

I'm pretty much started with this:

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

Whats the simplest way to do this, without too much code?

css
5 Answers

Jon P's answer is almost there - but the before element can be used to make a transparent circle to the left of the main div and a shadow produces the desired cut-out effect.

body {
  /* You can change the background colour to verify that this is truly transparent */
  background-color: pink;
}

.player {
    /* Just a normal box */
    width: 480px;
    height: 80px;
    border-radius:0 40px 40px 0;
    background-color:#0000FF;
    position:relative;    
    color:#FFF;
   /* Move the box right so that we can see the cutout to the left */
    margin-left: 40px;
}

.player:before
{
    width: 80px;
    height: 80px;
    border-radius:0 40px 40px 0;
    background-color:transparent;    
    display:inline-block;
    vertical-align: middle;
    margin-right: 10px;
    content: '';
    /* This is the cutout: */
    box-shadow: 40px 0px #00f;
    position: relative;
    left: -80px;
}
<div class="player">Some Content</div>

user_24806610

I was thinking like that too, but I got a better way, I used a svg as a background. It also has the advantage of being more responsive. I will send my problem here to other people who will also have the same question.

* {
  padding: 0;
  margin: 0;
}

#sidebar {
    width: 500px;
    height: 100vh;
    background: url(https://svgshare.com/i/XiH.svg) center right;
    background-size: 150%;
}
<div id="sidebar"></div>

user_153148780
Related