CSS制作凹陷（挖空）效果

最近项目中有一个需求，设计一个弹窗样式，其中四个角各挖去四分之一圆，简化之后如下： 一开始没有找到特别好的办法，后来通过搜索发现可以通过background-image中的径向渐变实现radial-gradient。具体的用法网上已经有很多资料，现在把我的实现代码直接贴出来。主要是通过伪元素来实现。

HTML部分:

 <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

CSS部分:

  .container{
    margin: 50px;
    background-color: #ccc;
    width: 400px;
    height: 100px;
  }
  .box1{
    width: 400px;
    height: 50px;
    position: relative;
  }
  .box1::before{
    content: '';
    width: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle at 0% 0%,transparent 0%,transparent 20px,red 20px,red 100%);
  }
  .box1::after{
    content: '';
    width: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: radial-gradient(circle at 100% 0%,transparent 0%,transparent 20px,red 20px,red 100%);
  }
  .box2{
    width: 400px;
    height: 50px;
    position: relative;
  }
  .box2::before{
    content: '';
    width: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle at 0% 100%,transparent 0%,transparent 20px,red 20px,red 100%);
  }
  .box2::after{
    content: '';
    width: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: radial-gradient(circle at 100% 100%,transparent 0%,transparent 20px,red 20px,red 100%);
  }