css斜切角/内阴影

敲什么代码

于 2021-12-16 17:22:42 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/yigeboke/article/details/121979414

//这是添加斜切角
linear-gradient(-45deg, transparent 12px, #5bdcfa 0) right(如果多个角要切用逗号隔开再加一行),
linear-gradient(135deg, transparent 12px, #5bdcfa 0) left;(方向和角度可以自行调整)

//这是内阴影
box-shadow: inset 0 0 14px 3px #01aceb;(有内阴影但是无法兼顾切角)
//这是使用clip-path剪切掉多余的部分
                clip-path: polygon(
                    0 17px,
                    17px 0,
                    100% 0,
                    100% calc(100% - 17px),
                    calc(100% - 17px) 100%,
                    0 100%
                )

//这是切两个角的,如果是一个或更多角可以自行添加
//到这基本能凑活用了,就是切角那里的阴影效果不太好

这是我所用到的,切了一个角