CSS 多边形魔方

一款强大的CSS clip-path多边形编辑工具，支持渐变效果，帮助您轻松创建和编辑精美的多边形形状

多边形编辑器

编辑区域

点击画布添加顶点 | 拖拽顶点移动 | 右键点击顶点删除 | 点击预设形状快速创建

顶点 10

X (%)

Y (%)

顶点 21

X (%)

Y (%)

顶点 32

X (%)

Y (%)

顶点 43

X (%)

Y (%)

预览尺寸

宽度 (px)

高度 (px)

预设形状

预设比例

缩放

当前比例:1:1

背景设置

背景图片 URL

渐变背景

操作说明

点击画布或边线添加顶点
拖拽顶点移动位置
右键点击顶点删除
使用样式配置调整外观

预览区域

实时预览

300 × 300px

代码配置

代码格式

.element {
  width: 300px;
  height: 300px;
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
}

可视化编辑

通过直观的可视化界面拖拽编辑多边形顶点，交互动效反馈，所见即所得

实时预览

实时预览多边形效果，支持自定义背景图片和预览尺寸

代码生成

自动生成CSS clip-path代码，一键复制粘贴到您的项目中

渐变背景

支持线性和径向渐变背景，自定义颜色和方向