CSS Clip-path Builder
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Understand CSS Clip-path Builder
Monta formas de clip-path do CSS — polygon, circle, ellipse e inset — visualmente, e devolve a propriedade pronta para colar.
How it works
O clip-path define uma região e tudo fora dela não é pintado. `polygon()` recebe uma lista de pontos `x% y%` medidos a partir do canto superior esquerdo da caixa do elemento, então `polygon(50% 0, 100% 100%, 0 100%)` é um triângulo; `circle()` e `ellipse()` recebem raios mais uma posição com `at`; `inset()` recebe recuos superior, direito, inferior e esquerdo, com um raio opcional via `round`. As porcentagens são resolvidas contra a própria caixa do elemento em cada eixo de forma independente, o que significa que a forma se estica junto com o elemento em vez de manter as proporções.
When to use it
- Cortar uma borda diagonal ou inclinada em um divisor de seção sem exportar uma imagem
- Mascarar uma imagem ou um vídeo em um quadro não retangular apenas com CSS
- Construir uma seta, um chevron, um selo ou uma fita que de outro modo exigiriam uma imagem de fundo
- Criar uma animação de revelação fazendo a transição entre dois polígonos
Watch out for
- O recorte não muda o layout. O elemento continua ocupando a caixa inteira, então os vizinhos não avançam para o espaço que você cortou — acrescente margem negativa ou ajuste o espaçamento você mesmo.
- As porcentagens são por eixo, então a forma se distorce quando o elemento muda de tamanho. Uma diagonal de 45° em uma largura não é de 45° em outra; use unidades em pixels ou de viewport quando o ângulo precisa se manter.
- Transições entre polígonos só interpolam quando os dois têm o mesmo número de pontos na mesma ordem. Acrescente pontos repetidos para completar a forma mais curta em vez de esperar que o navegador faça a correspondência.
- Um clip-path recorta tudo o que o elemento pinta, incluindo box-shadow, outline e o anel de foco. Um botão recortado pode perder por completo o indicador visível de foco, o que é uma regressão de acessibilidade.
Frequently Asked Questions
Que formas o clip-path consegue criar?
Quatro funções de forma: polygon() para formas arbitrárias de n lados (arraste os pontos de controle), circle() para círculos perfeitos com centro e raio, ellipse() para elipses e inset() para recortes retangulares com cantos arredondados opcionais via border-radius.
Como criar um divisor de seção diagonal com clip-path?
Use polygon() no contêiner da seção: polygon(0 0, 100% 0, 100% 90%, 0 100%). Isso recorta o canto inferior direito na diagonal, criando uma borda inferior inclinada. Ajuste as porcentagens para mudar o ângulo e a direção da diagonal.
O clip-path afeta o fluxo do layout?
Não — o clip-path afeta apenas a renderização visível. O elemento continua ocupando as dimensões originais completas no layout, o que pode gerar áreas de clique invisíveis ou vãos de sobra. Acrescente overflow: hidden ao elemento pai se o espaçamento parecer errado.
How to Use CSS Clip-path Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.