CSS中的负边框半径？

Question

我正在尝试使用 CSS 来制作一个如下所示的 div：

我几乎是从这个开始的：

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

什么是最简单的方法来做到这一点，没有太多的代码？

原文由 Jason Axelrod 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Jon P 的答案几乎就在那里 - 但是 before 元素可用于在主 div 的左侧制作一个透明圆圈，并且阴影会产生所需的剪切效果。

 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>

原文由 Max Murphy 发布，翻译遵循 CC BY-SA 4.0 许可协议