技术栈

css3 clip-path剪切图片

百事可乐☆2023-12-15 13:45

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

剪切四个角

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

上一篇:双端队列和优先级队列
下一篇:vm的centos本地配置yum
相关推荐
IT_陈寒
8 分钟前
Redis主从切换竟让业务卡了3秒?这个坑我替你踩了
前端·人工智能·后端
天若有情673
11 分钟前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
xieliyu.
16 分钟前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
zttbee
38 分钟前
前端测试内容
前端
2603_96589662
42 分钟前
async/await|JS同步写法解决异步终极方案
前端·javascript
A2420734930
3 小时前
TCP 三次握手与四次挥手:从原理到状态机一次讲清
前端
GreenTea
10 小时前
GrokBot 核心成员 Lauren Tan:每月交付 2000 个 PR 的人,是怎么用 AI 的
前端·后端·架构
mCell
11 小时前
用 Knip 清理 AI Coding 留下的冗余代码
前端·ai编程·前端工程化
笃行350
12 小时前
使用Rokid AIUI做了一个童年推箱子游戏
前端
excel
13 小时前
前端加密的作用与使用场景
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05人工智能(AI)发展史:详细里程碑06微信历史版本含下载地址( Windows PC | 安卓 | MAC )及设置微信不更新072026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?08ZCode 周末送额度活动开启:3 亿 Token 免费领取09数学公理体系大全:第六章 选择公理的等价形式及证明102026 爱知・名古屋亚运会怎么看?直播平台+赛程安排分享