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值的写法,可以写一个值,也可以写多个值。

相关推荐
西洼工作室14 分钟前
CSS高效开发三大方向
前端·css
昔人'17 分钟前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾1 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶3 小时前
Starting again-02
开发语言·前端·javascript
Apifox.3 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku3 小时前
Typescript return type
前端·javascript·typescript
叁佰万3 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆3 小时前
js异步任务你都知道了吗?
前端·面试
光影少年3 小时前
react生态
前端·react.js·前端框架
golang学习记4 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端