样式如下

Office icon
代码
原理
先画好框架,设置圆角
右上角的折叠效果和三道杠分别用伪元素:before&:after完成
三道杠是由border-top设置double(双线)属性 &border-bottom设置solid(单实线)完成的。
!要注意的是,伪元素的height要和border-bottom一致,并且为border-top的三分之一。
右上角的效果用border设置上和右方向颜色为透明,之后用box-shadow将背景尽可能向外延伸直到大于框架的宽高,此时box-shadow的颜色就是icon的颜色,右上角因为背景被向外延伸里所以会变透明,不会显露框架的颜色,实现了透明的效果。
最后overflow: hidden隐藏多余的部分。
转载文章,版权归作者所有,转载请联系作者。作者:,来源: