Css绘制抖音logo

略微有一些瑕疵 😂，纯Css绘画。

一共是由三部分组成的 div 就是中间那一根长的，after 是下面有缺口的圆，before上面那一撇，两边的颜色用的是阴影。

主要用到的一些属性 drop-shadow contrast brightness

drop-shadow

为什么有box-shadow 还需要用drop-shadow

drop-shadow主要是为了弥补box-shadow的不足

1. drop-shadow 可以给不规则元素填充阴影，而box-shadow会有白边
2. drop-shadow 可以给重叠的元素添加阴影，而box-shadow会有白边

contrast 对比度

示例150%效果

示例50%效果

brightness

brightness他的值越高颜色越亮，值越低颜色越暗。

示例150%效果

示例50%效果

源码

大体思路中间的长方形正常绘制，增加阴影天蓝色，会覆盖伪类，所以伪类不需要写天蓝色。上面的before其实是个圆，缺口其实是用border整的把左，右，上的border变成透明色，只留下 下面的，然后旋转一下就好了。after也是同理，after只去掉上面的边框，然后进行旋转贴合中间的长方形就好了。