CSS creates the hollowing effect

In the recent project, there was a requirement to design a popover style, in which four corners were cut out a quarter of a circle, which was simplified as follows:At the beginning, I did not find a particularly good method. Later, I found that radial gradient in background-image could be realized through search. Specific usage online has a lot of information, now put my implementation code directly posted. This is mostly done with pseudo-elements.

HTML part:

 <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
Copy the code

The CSS part:

  .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%);
  }
Copy the code