- 前言
开发项目时，经常会遇到如上图左上角和右上角这种内嵌的圆角效果，在以前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里面画了一个圆圈，然后不断调整大小，调整到圆圈的边缘和内嵌的圆角刚刚贴合，就能确定小圆圈的大小了