内嵌圆角CSS实现

• 前言

开发项目时，经常会遇到如上图左上角和右上角这种内嵌的圆角效果，在以前css3还没有普及时不用说一张图片搞定，但是到现在我们完全可以用css去实现。

• 实现

第一步：思路

仔细观察这个小缺角，它其实是个圆圈的一部分，如果把它补全，应该是这样子的：

为了更直观更显眼，我将圆圈的背景色改为红色，如果是蓝色，就和背景色融为一体了。
我再把小圆圈的边框去掉，就更直观了

所以接下来实现就很简单了，创建一个容器，在左上角和右上角用伪元素定位两个圆圈，并且让容器超出隐藏，完美！

第二步：代码

Html代码：

 <ul>
 <li class="container">
 <div></div>
 </li>
 </ul>

css代码：

.corner{
    content: "";
    width: 20px;
    height: 20px;
    background: #25bdff;
    border-radius: 20px;
    border:5px #ffd958 solid;
    content: "";
    position: absolute;
}

.container{
    border-bottom: 6px solid #c06e32;
    border-radius: 10px;
    width: 352px;
    background: #c06e32;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 5px 24px 0;

    &::before{
        @extend .corner;
        left: -15px;
        top: -15px;
    }

    &::after{
        @extend .corner;
        right: -15px;
        top: -15px;
    }

    >div{
        background: #fbaf5e;
        border:5px #ffd958 solid;
        border-radius: 10px;
        text-align: center;
        padding: 14px 0 20px;
    }
}                            

PS：这里只贴出核心部分，里面的内容概不赘述

题外话
小圆圈的大小怎么确定?

我是在PS里面画了一个圆圈，然后不断调整大小，调整到圆圈的边缘和内嵌的圆角刚刚贴合，就能确定小圆圈的大小了

在线查看效果
https://jsfiddle.net/mcxwbuky/