Skip to main content

CSS clip path

>>>>>>>>>>>>>>>>>>>>>>>>>>Para um web design atraente, às vezes os elementos precisam ser aparados de uma certa forma. Isto é relativamente fácil de fazer com CSS clip path.

O que é um CSS clip path?

CSS Clip-Path é uma propriedade chamada CSS que pode ser usada para mostrar ou esconder certas áreas de um elemento, por exemplo uma imagem, para que apenas partes do elemento sejam exibidas em uma página da web.

Em alemão, caminho de clipe significa “Schneidpfad” ou “caminho de corte” análogo à linha de corte sobre a qual uma tesoura é guiada. Clip-path pode ser usado para especificar uma das várias formas básicas ou um caminho vetorial (caminho SVG), cada um dos quais deve ser usado como caminho de recorte para o elemento.

Elementos em CSS clip path

Ao utilizar CSS clip path, todas as peças que estão fora do caminho de corte geralmente não são exibidas. Para a propriedade CSS, os seguintes elementos básicos podem ser usados para definir o corte:

  • nenhum – o elemento não está aparado
  • inset – define um retângulo
  • círculo – define um círculo
  • elipse – define uma elipse
  • polígono – define qualquer polígono

Informações

Por exemplo, para desenhar um rectângulo com o caminho do clip de propriedade CSS, as seguintes entradas são feitas no ficheiro CSS:

inset {
-webkit-clip-path: inset (30% 25% 30% 30% 10%);
clip-path: inset (30% 25% 30% 30% 10%);
}

As 4 percentagens são usadas para indicar por quanto os lados individuais do rectângulo devem ser recuados em relação à borda do elemento.

Você pode encontrar mais informações sobre este tópico aqui:
https://www.css-tricks.com/


Você tem mais alguma pergunta?

Por favor, contacte-nos


Outros conteúdos