纯CSS简单实现四角内凹圆角

平常开发常会用到圆角，外凸很好实现，只要直接使用border-radius属性即可。但如果有内凹角的情况，一般都会直接使用背景图片，但如果没有背景图片的话，纯CSS也可以实现这种效果。

简单内凹

要实现这种内凹圆角比较简单，代码如下：

html:

<div class="radius"></div>

css:

通过改变对应方向即可实现 四个角度的内凹圆角，内凹半径就不需要我多说了，调节px就行

下面说个稍复杂的，四角内凹

单独的元素无法通过CSS实现，只能通过复数元素来完成了，代码如下

html:

css:

 

代码没什么好多说的，简单的四个不同方向的内凹元素通过flex布局来实现，清晰明了， 通过改写内凹半径和container元素宽高就可以简单调节。