css3 clip-path剪切图片

大致看了一下,反正以后用到就慢慢调吧

剪切四个角

clip-path: polygon(14px 0, calc(100% - 14px) 0,

100% 14px, 100% calc(100% - 14px),

calc(100% - 14px) 100%, 14px 100%,

0 calc(100% - 14px), 0 14px);

三角形

clip-path: polygon(50% 0,0 100%, 100% 100%);

矩行

clip-path:inset(10px)

括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。

相关推荐
wangjialelele7 分钟前
Qt中的常用组件:QWidget篇
开发语言·前端·c++·qt
乔冠宇22 分钟前
vue需要学习的点
前端·vue.js·学习
用户479492835691530 分钟前
同样是 #,锚点和路由有什么区别
前端·javascript
Hero_112740 分钟前
在pycharm中install不上需要的包
服务器·前端·pycharm
爱上妖精的尾巴1 小时前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏
是谁眉眼1 小时前
wpsapi
前端·javascript·html
谅望者1 小时前
Flexbox vs Grid:先学哪一个?CSS 布局完全指南(附可视化示例)
前端·css·html·css3·css布局·css flexbox·css grid
老华带你飞1 小时前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·商城推荐系统
JS.Huang1 小时前
【JavaScript】Pointer Events 与移动端交互
前端·javascript
一 乐2 小时前
物业管理系统|小区物业管理|基于SprinBoot+vue的小区物业管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端