← 工具箱首页
✂️ CSS Clip-Path 生成器
广告人之家
形状
三角形
菱形
箭头
五角星
六边形
对话气泡
斜切角
叶形
圆形 circle
椭圆 ellipse
圆角 inset
半径
25%
圆心 X
50%
圆心 Y
50%
横半径
25%
纵半径
25%
圆心 X
50%
圆心 Y
50%
上
10%
右
10%
下
10%
左
10%
圆角
12px
多边形模式:直接拖动预览图上的圆点调整顶点;双击空白处添加顶点
填充背景(可选:换成自己的图片)
恢复渐变
图片仅在本页内预览,不会上传
CSS 代码
复制代码
重置当前形状
· 生成代码可直接贴到任意元素;裁剪基于元素自身盒尺寸,百分比随元素宽高等比缩放。
· polygon 顶点按顺时针书写;拖动圆点、双击加点的改动会实时同步到代码。
· 兼容性:Chrome/Edge/Firefox/Safari 均支持基本形状;如需兼容旧浏览器请加 -webkit-clip-path 前缀。