How to generate reverse fillet by css

how is the following effect (this small notch) generated?

clipboard.png

Css
Mar.28,2021

< div style= "width:300px; height:300px; position:relative; background-color:-sharp000" >
< div style= "width:30px; height:30px; border-radius:50%; position:absolute; top:-15px; right:-15px; background-color:-sharpfff" > < / div >
< / div >
is positioned with a circle of background color.


normally draw two circles with css, and then place them in the corresponding position through specific positioning.
parent element relative , circle absolute , and then set the specific occurrence location through top, left, right, bottom .
this is not the only way, just choose the way you feel most comfortable.


after with the same height and width as div border-radius:50% background-color is set to that gray Beijing and set to the corresponding location


html:
<div class="test" >
  <div class="test1" ></div>
  <div class="test2" ></div>
</div>

css:
      .test1,.test2{
    width: 200px;
    height: 100px;
  }
  .test1{
    background: radial-gradient(circle at bottom left, transparent 15px, -sharpb4a078 16px);
  }
  .test2{
    background: radial-gradient(circle at top left, transparent 15px, -sharpb4a078 16px);
  }    ![][1]


if the radius of that notch is 5px;
you can do this:

.radius{
    width:10px;
    height:10px;
    border-radius:50%;
    border:1000px solid -sharpfff;//
    ...
}

you can try

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b38abd-2b67d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b38abd-2b67d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?