开发项目时，经常会遇到如上图左上角和右上角这种内嵌的圆角效果，在以前css3还没有普及时不用说一张图片搞定，但是到现在我们完全可以用css去实现。
第一步：思路
仔细观察这个小缺角，它其实是个圆圈的一部分，如果把它补全，应该是这样子的：
为了更直观更显眼，我将圆圈的背景色改为红色，如果是蓝色，就和背景色融为一体了。
我再把小圆圈的边框去掉，就更直观了
所以接下来实现就很简单了，创建一个容器，在左上角和右上角用伪元素定位两个圆圈，并且让容器超出隐藏，完美！
第二步：代码
Html代码：
1 <ul> 2 <li class="container"> 3 <div></div> 4 </li> 5 </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/
原文：https://www.cnblogs.com/xxyzjb/p/10552481.html