倒圆角

css

   <style>
        /* 定位： relative 相对定位 自身的位置
                 absolute 绝对定位   以他非静态定位祖先元素为参照，
                 fixed    固定定位  参照物以html为参照物的
                 static   静态定位 不设置定位默认的就是静态定位
                 sticky   粘性定位  滚动一定位置之后 再去固定位置，样式是属于一个新的样式，部分浏览器兼容性不好，需要时直接用js写
        */
      
        .box{
            /*  子元素想以父元素为参照物，并且子元素设置了相对定位，父元素可以设置除了statice都可以，一般设置都是父元素设置成相对定位， */
          position: relative;
          /* position: fixed;
          top: 0;
          width: 100px;
          height: 100px;
          background-color: red; */
           width: 200px;
           height: 200px;
           background-color: blue;
        }

        .c1{
            /* 脱离文档流 */
            /* position: absolute;  */
            width:20px ;
            height: 20px;
            /* border: 1px solid black; */
            position: absolute;
        }
        .right-top{
            right: 0;
            top:0;
            /* red  颜色别名
            三原色rgb
            红 0-255
            绿 0-255
            蓝 0-255
            十六进制 f = 15
            #fff 
            */
            border-color: #ffffff;
            border-right: none;
            background-color: #fff;
            /*左上 右上 右下 左下 */
            border-radius:0 0 0 20px;
        }
        .right-bottom{
            right: 0;
            bottom: 0;
            border-color: #fff;
            border-radius: 20px 0 0 0 ;
            border-bottom: none;
            background-color: #fff;
        }
        .left-top{
              top:0;
              left: 0;
              border-color: #fff;
             border-radius: 0px 0 20px 0 ;
             background-color: #fff;
             

        }
        .left-bottom{
              bottom:0;
              left: 0;
              border-color: #fff;
             border-radius: 0px 20px 0px 0 ;
             background-color: #fff;  
        }

    </style>

html

 <div class="box">
        <div class="c1 right-top"></div>
        <div class="c1 right-bottom"></div>
        <div class="c1 left-top"></div>
        <div class="c1 left-bottom"></div>
     </div>