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

Previous: Mobile rem layout. On a mobile phone with a virtual keyboard, the tab of the lower fixed is obscured by a virtual reality keyboard. How to solve this problem?

Next: Why does short s = 1 not report an error?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu