Gerador de clip-path

Como funciona

O clip-path recorta um elemento até um contorno. Tudo o que fica fora da forma não é desenhado nem clicável, o que o torna uma forma de verdade, e não uma imagem de uma forma — e funciona em qualquer elemento, inclusive imagens e vídeo.

Porcentagens, não pixels

Os pontos do polígono são dados como porcentagens da largura e da altura do próprio elemento, então a forma se estica junto com o elemento, em vez de quebrar em outro tamanho. É isso que a torna utilizável em um layout responsivo.

Os cliques seguem a forma

Esta é a parte que diferencia o clip-path de uma sobreposição decorativa. A região recortada não recebe eventos de ponteiro, então um botão triangular é triangular tanto para o mouse quanto para os olhos.

Animando entre formas

Um polígono só pode fazer a transição suave para outro polígono se ambos listarem o mesmo número de pontos. O truque de sempre é completar a forma mais simples com pontos duplicados para que as contagens batam — um triângulo escrito com quatro pontos, dois deles no mesmo lugar, pode se transformar em um quadrado.

A linha -webkit-

Os navegadores atuais precisam apenas da propriedade sem prefixo. A cópia com prefixo está incluída porque algumas versões mais antigas do Safari ainda a exigem e não custa nada deixá-la.

O que ele não faz

Ele recorta; não reorganiza o fluxo. O texto ao redor ainda trata o elemento como o retângulo original. Para fazer o texto contornar uma forma, use shape-outside, que tem a mesma sintaxe.