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

相关推荐
liuyang___1 小时前
第一次经历项目上线
前端·typescript
西哥写代码1 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木1 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo2 小时前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
雪芽蓝域zzs2 小时前
JavaScript splice() 方法
开发语言·javascript·ecmascript
不灭锦鲤2 小时前
xss-labs靶场第11-14关基础详解
前端·xss
不是吧这都有重名2 小时前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端
霸王蟹2 小时前
React中巧妙使用异步组件Suspense优化页面性能。
前端·笔记·学习·react.js·前端框架
Maỿbe3 小时前
利用html制作简历网页和求职信息网页
前端·html
森叶3 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron