略微有一些瑕疵 😂，纯Css绘画。
一共是由三部分组成的 div 就是中间那一根长的，after 是下面有缺口的圆，before上面那一撇，两边的颜色用的是阴影。
主要用到的一些属性 drop-shadow contrast brightness
drop-shadow
为什么有box-shadow 还需要用drop-shadow
drop-shadow主要是为了弥补box-shadow的不足
- drop-shadow 可以给不规则元素填充阴影，而box-shadow会有白边
- drop-shadow 可以给重叠的元素添加阴影，而box-shadow会有白边
contrast 对比度
示例150%效果
示例50%效果
brightness
brightness他的值越高颜色越亮，值越低颜色越暗。
示例150%效果
示例50%效果
源码
大体思路中间的长方形正常绘制，增加阴影天蓝色，会覆盖伪类，所以伪类不需要写天蓝色。上面的before其实是个圆，缺口其实是用border整的把左，右，上的border变成透明色，只留下 下面的，然后旋转一下就好了。after也是同理，after只去掉上面的边框，然后进行旋转贴合中间的长方形就好了。
