clip-path CSS
Grátis, sem cadastro, roda no seu navegador.
Em vez de desenhar a forma, use-a para recortar outra coisa. Um `clipPath` no documento mais uma propriedade CSS transforma uma imagem, um vídeo ou uma div colorida na forma — e é assim que um blob vira uma máscara de avatar em vez de um fundo.
Uma exportação de clip-path CSS, cortada nas primeiras linhas
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}O que vale saber
- O elemento mantém o conteúdo: isto recorta uma fotografia em vez de ficar atrás dela.
- Precisa tanto do bloco `<svg>` inline quanto da regra CSS — a propriedade referencia o clipPath pelo id.
- O elemento precisa casar com o espaço de coordenadas do recorte, e é por isso que a saída informa o tamanho.
- Troque o id se usar mais de um recorte na mesma página.
Compatibilidade de navegadores
Suportado em todos os navegadores atuais. `clip-path: url(#id)` referenciando um clipPath inline é a forma mais ampla — mais que as sintaxes de função `path()` e `shape()`, que são mais novas e não valem o risco quando isto não custa nada a mais.
Tamanho em todas as predefinições
Todas as predefinições que este formato consegue expressar, medidas como o gerador as emite. A menor é Hexágono com 369 bytes; a maior é Respingo com 859 bytes. A contagem de pontos é o que determina a diferença — cada ponto extra adiciona um segmento cúbico inteiro de coordenadas.
| Formato | Tamanho |
|---|---|
| Hexágono | 369 B |
| Cristal | 374 B |
| Gema facetada | 400 B |
| Picos de montanha | 423 B |
| Triângulo arredondado | 435 B |
| Arco | 438 B |
| Ziguezague marcado | 456 B |
| Onda profunda | 474 B |
| Borda de nuvem | 487 B |
| Onda de rodapé | 510 B |
| Arcos recortados | 511 B |
| Seixo | 512 B |
| Onda suave | 514 B |
| Ondas em camadas | 544 B |
| Blob suave | 548 B |
| Degraus | 550 B |
| Festão | 574 B |
| Blob orgânico | 620 B |
| Brilho | 626 B |
| Onda orgânica | 670 B |
| Estrela | 769 B |
| Borda pixelada | 771 B |
| Flor | 775 B |
| Bolha | 777 B |
| Ondulação | 847 B |
| Respingo | 859 B |
Em mais detalhe
A saída usa `clipPathUnits="userSpaceOnUse"` e informa o tamanho que o elemento deve ter, em vez da forma `objectBoundingBox` que escalaria para qualquer elemento automaticamente. Isso parece a pior escolha até você tentar: `objectBoundingBox` exige que cada coordenada seja expressa entre 0 e 1, o que significa reemitir o caminho em outra escala e perder a maior parte da precisão para o arredondamento. Ser explícito quanto ao tamanho mantém a curva exatamente como foi desenhada.
Perguntas
Quais formas funcionam como clip-path CSS?
Este formato cobre Onda, Blob. Isso é uma restrição real e não uma limitação desta ferramenta: onde um gerador falta nessa lista, o formato realmente não consegue expressá-lo, e oferecê-lo mesmo assim entregaria a você algo que desenha silenciosamente a forma errada.
Qual o tamanho de uma exportação de clip-path CSS?
Entre 369 e 859 bytes nas 26 predefinições que o suportam. Menos pontos é a alavanca que importa; suavidade e cor não custam nada.
Posso editar à mão depois?
Pode. A saída é texto puro sem comentário do gerador, sem marcação identificadora e sem link de volta para cá. Mude as cores, renomeie a classe ou cole o caminho no seu próprio SVG — nada mais adiante depende de ele continuar como estava.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.