Desenvolvedor / Formas em CSS

Gerador de clip-path CSS: Polígono, Círculo, Elipse e Inset

Crie recortes CSS com seis predefinições de polígonos, pontos arrastáveis e ajustáveis pelo teclado, além de controles para círculo, elipse e inset. Visualize um gradiente ou uma imagem local e copie o CSS em porcentagens ou pixels.

Gerador de clip-path CSS: Polígono, Círculo, Elipse e Inset: Recorta a visualização na forma selecionada sem alterar o arquivo de imagem original. A saída em porcentagens acompanha as dimensões do elemento. A saída em pixels usa a largura e a altura de referência; a visualização exibida é redimensionada para caber na sua tela. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Laboratório de formas de clip-pathProcessamento local

Roda inteiramente no seu navegador

Arraste um ponto numerado, use as teclas de seta ou informe as coordenadas. As coordenadas abaixo são porcentagens; a saída em pixels usa o tamanho de referência.

Ponto 1
Ponto 2
Ponto 3
Ponto 4
Ponto 5
Ponto 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

As formas em porcentagem são redimensionadas com o elemento. As porcentagens do círculo usam a diagonal normalizada; as da elipse usam largura e altura. As coordenadas em pixels são fixas às dimensões de referência.

Recorte com CSS

clip-path na MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . O recorte altera a região visível sem alterar a caixa de layout do elemento.

Coordenadas de formas básicas

W3C CSS Shapes Level 1, formas básicas: https://www.w3.org/TR/css-shapes-1/#basic-shapes . As coordenadas do polígono e os raios da elipse são calculados em relação à caixa de referência; as porcentagens do círculo usam sua diagonal normalizada. As coordenadas predefinidas e o gradiente são uma arte original.

Como usar

  1. Escolha uma forma e uma predefinição e defina as dimensões de referência.
  2. Arraste os pontos do polígono, use as teclas de seta ou edite as coordenadas; ajuste os controles para as outras formas.
  3. Escolha a saída em porcentagens ou pixels e copie o CSS.

Privacidade e limitações

As visualizações opcionais de imagens permanecem no seu dispositivo. Nada é enviado.

Ferramentas relacionadas

CSS GridBox ShadowFlexbox

Perguntas frequentes

Como edito um ponto sem arrastá-lo?

Selecione a alça numerada e use as teclas de seta ou informe as porcentagens X e Y na lista de pontos. Os polígonos precisam de pelo menos três pontos.

Isso exporta uma imagem recortada?

Não. A ferramenta exporta CSS para um elemento HTML. A imagem local serve apenas como visualização.

Como as porcentagens do círculo são medidas?

O CSS usa a diagonal normalizada, sqrt((largura ao quadrado + altura ao quadrado) / 2), como referência para o raio do círculo. Os raios da elipse usam a largura e a altura separadamente.

Ferramenta grátis · no seu navegador execuções · não precisa de conta