Escolha uma forma, arraste os pontos ou digite as porcentagens X e Y e copie o clip-path gerado. A prévia usa as mesmas declarações que você copia.
Funciona localmente no seu navegadorO editor trabalha sobre uma única forma polygon() e escreve as duas declarações que uma folha de estilos precisa: a linha com prefixo -webkit-clip-path e a linha padrão clip-path. Cinco formas prontas cobrem os casos comuns —Triângulo com 3 pontos, Losango com 4, Hexágono com 6 (o padrão), Estrela com 10 e Chevron com 6— e cada ponto se move arrastando a alça no quadro ou digitando uma porcentagem X e Y.
O quadro é uma prévia real desse mesmo CSS: o polígono é aplicado ao elemento enquanto você arrasta e o contador no cabeçalho mostra quantos pontos a forma tem. As coordenadas são porcentagens da caixa do próprio elemento, então a forma mantém as proporções quando aplicada a um elemento de outro tamanho.
O bloco tem uma única regra: .clipped-element com uma linha -webkit-clip-path e uma linha clip-path, ambas com o mesmo valor polygon() formado por pares de porcentagens x y separados por vírgulas. Nada mais é escrito — nenhum prefixo além de -webkit-, nenhuma variável CSS e nenhum seletor para o seu código, então troque .clipped-element pela classe que você realmente usa.
Os pares são porcentagens da caixa de referência, que é a caixa de borda em um elemento que não a altera. Por isso a forma acompanha o tamanho do elemento e não depende do tamanho em pixels do quadro de prévia.
A prévia mostra o que o seu navegador faz com o valor; a página não traz tabela de compatibilidade e não detecta suporte. O recorte poligonal básico funciona nos Chrome, Edge, Firefox e Safari atuais e a linha -webkit- mantém vivos Safari e iOS antigos, mas verifique os motores do seu público antes de a forma significar algo: um navegador sem suporte pinta a caixa inteira.
O recorte não é só visual: um clique fora do polígono não atinge o elemento, o que importa quando a forma recortada é um link ou um botão e a área clicável precisa corresponder ao que aparece na tela.
Um polígono precisa de três pontos e aceita doze. Adicionar ponto divide a aresta depois do ponto ativo, Remover ponto apaga o ativo e a linha de status informa os dois limites no idioma da página. A lista Ponto ativo segue a ordem de criação, que também é a ordem dos pares dentro de polygon().
Tudo roda dentro da página: a forma é calculada pelo navegador, nenhum valor é enviado e a ferramenta continua funcionando sem conexão. O elemento da prévia recebe a mesma declaração que o painel de código mostra, então não existe uma segunda implementação que possa divergir do CSS copiado.