CSS中的负边界半径？

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

我基本上是从这个开始的：

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

---

在没有太多代码的情况下，最简单的方法是什么？

您可以使用

before

伪元素来提供“cut-out”

.player{
宽度：480px；
高度：80px；
边界半径：0 40px 40px 0；
背景色：#0000FF；
位置：相对位置；
颜色：#FFF；
}
.玩家：之前
{
宽度：80px；
高度：80px；
边界半径：0 40px 40px 0；
背景色：#FFF；
显示：内联块；
垂直对齐：中间对齐；
右边距：10px；
内容：''；
}

某些内容

.wrapper{
宽度：500px；
高度：103px；
背景色：红色；
填充顶部：15px；
}
.玩家{
宽度：480px；
高度：83px；
左边距：10px；
边框右上角半径：40px；
边框右下半径：40px；
边框：1px纯黑；
左边界：无；
背景颜色：蓝色；
-webkit掩模图像：径向渐变（左侧圆圈，透明0，透明40px，黑色41px）；
}

这是，这次使用的是径向背景图像。这使得它是透明的，可以在Firefox和Chrome中使用

.player{
宽度：480px；
高度：80px；
边界半径：40px；
背景图像：径向梯度（38px40px处的圆圈，rgba（0,0,0,0）0，rgba（0,0,0,0）40px，蓝色40px）；
颜色：#FFF；
}

---

我也是这样想的，但我找到了一个更好的方法，我使用svg作为背景。它还具有响应速度更快的优点。我会把我的问题发送给其他人，他们也会有同样的问题

*{
填充：0；
保证金：0；
}
#边栏{
宽度：500px；
高度：100vh；
背景：url(https://svgshare.com/i/XiH.svg)中间偏右；
背景大小：150%；
}

---

不错！老实说，我有点惊讶于这是可能的。问题是，我需要缩进是透明的，而不是白色；是的，我们还不太清楚，但很快就会出现

剪辑路径

：&问题是，我需要缩进是透明的，而不是白色的；似乎至少在IE11中也能正常工作，可能还有一个小的位置调整