CSS clip-path: Criar Formas Personalizadas

O Que E clip-path?

A propriedade CSS clip-path define uma regiao de recorte que determina quais partes de um elemento sao visiveis. Tudo fora da regiao fica oculto. E como usar tesoura para cortar um elemento em qualquer forma — circulos, triangulos, hexagonos, estrelas ou formas completamente personalizadas.

Diferente de overflow: hidden, que so recorta retangularmente, ou border-radius, que se limita a elipses, clip-path permite qualquer forma geometrica. Ele altera a area realmente visivel do elemento, incluindo seus fundos, bordas e sombras.

Formas Basicas

• circle(): clip-path: circle(50% at 50% 50%); — cria um circulo. O primeiro valor e o raio, at define o centro.
• ellipse(): clip-path: ellipse(40% 60% at 50% 50%); — uma elipse com raios horizontal e vertical separados.
• inset(): clip-path: inset(10% 20% 30% 40%); — um retangulo recuado das bordas. Suporta round para cantos arredondados.
• polygon(): clip-path: polygon(50% 0%, 100% 100%, 0% 100%); — um triangulo. Qualquer numero de pontos possivel para qualquer forma poligonal.

Aplicacoes Criativas

Secoes Diagonais

Cortes diagonais entre secoes quebram a grade: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);. Isso cria uma borda inferior inclinada.

Imagens Hexagonais

Fotos de perfil ou thumbnails de portfolio como hexagonos em vez dos circulos habituais: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Efeitos de Revelacao

Combinado com transicoes CSS, voce pode revelar conteudo em qualquer forma — um circulo que se expande do centro ou uma cortina que se abre da esquerda.

Animar clip-path

clip-path pode ser animado com transicoes e animacoes CSS, desde que a forma de origem e destino usem o mesmo tipo e numero de pontos. Um poligono de quatro pontos pode transicionar para outro poligono de quatro pontos, mas nao para um circulo.

Exemplo de efeito hover:

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s; }
.card:hover { clip-path: polygon(5% 5%, 95% 0, 100% 95%, 0 100%); }

Usando Caminhos SVG

Para formas alem de poligonos simples, voce pode referenciar caminhos SVG: clip-path: url(#meuCaminho);. Defina o caminho em um SVG inline com elemento <clipPath>. Isso permite curvas, arcos e qualquer forma imaginavel.

Criar Formas

Nosso Gerador de clip-path permite criar formas visualmente. Mova pontos, veja o resultado em tempo real e copie o codigo CSS diretamente para seu projeto.