CSS Clip-path Builder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Preview (drag points, click to add, right-click to remove)
3 points
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Clip-path Builder

以可视化方式构建 CSS clip-path 形状——多边形、圆、椭圆和内缩矩形——并输出可粘贴的属性。

How it works

clip-path 定义一个区域，区域之外的一切都不会被绘制。`polygon()` 接受一组从元素盒子左上角度量的 `x% y%` 点，因此 `polygon(50% 0, 100% 100%, 0 100%)` 是一个三角形；`circle()` 和 `ellipse()` 接受半径外加一个 `at` 位置；`inset()` 接受上、右、下、左的内缩量，并可选 `round` 圆角。百分比在两个轴上各自独立地相对于元素自身的盒子解析，这意味着形状会随元素拉伸，而不会保持比例。

When to use it

  • 不导出图片就在区块分隔处切出斜边或倾斜边缘
  • 用纯 CSS 把图片或视频遮罩成非矩形的画框
  • 构建箭头、V 形、徽章或绶带形状，否则就得用背景图
  • 通过在两个多边形之间做过渡，制作揭示式动画

Watch out for

  • 裁切不改变布局。元素仍占据其完整盒子，因此相邻元素不会挪进你裁掉的空间——请自行加负外边距或调整间距。
  • 百分比是按轴计算的，因此形状会随元素尺寸变化而变形。某一宽度下的 45° 斜线在另一宽度下就不是 45° 了；当角度必须保持时，请使用像素或视口单位。
  • 只有当两个多边形的点数相同、顺序一致时，它们之间的过渡才会插值。请给较短的形状补上重复的点，而不要指望浏览器替你把它们对应起来。
  • clip-path 会裁掉元素绘制的一切，包括它的 box-shadow、outline 和焦点框。被裁切的按钮可能完全失去可见的焦点指示，这是一处无障碍退化。

Frequently Asked Questions

clip-path 能创建哪些形状？

四个形状函数：polygon() 用于任意 n 边形（可拖动控制点），circle() 用于给定圆心和半径的正圆，ellipse() 用于椭圆，inset() 用于矩形裁切并可通过 border-radius 设置圆角。

如何用 clip-path 做出斜向的区块分隔？

在区块容器上使用 polygon()：polygon(0 0, 100% 0, 100% 90%, 0 100%)。它会把右下角沿对角线裁掉，形成一条倾斜的底边。调整这些百分比即可改变斜角的角度和方向。

clip-path 会影响布局流吗？

不会——clip-path 只影响可见的渲染。元素在布局中仍然占据其完整的原始尺寸，这可能造成看不见的点击区域或溢出空隙。如果间距看起来不对，可以在父元素上加 overflow: hidden。

How to Use CSS Clip-path Builder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.