função polygon() CSS

definição e uso

CSS polygon() função usada para definir um polígono.

polygon() função com clip-path propriedade e shape-outside propriedades usadas em conjunto.

instância

exemplo 1

Cortar a imagem em um polígono:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Experimente você mesmo

exemplo 2

Cortar a imagem em um polígono:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Experimente você mesmo

exemplo 3

usar polygon()、clip-path e shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Experimente você mesmo

Sintaxe CSS

polygon(fill-rule, length-percentage)
Valores Descrição
fill-rule

Opcional. Especifica a regra de preenchimento. Pode ser nonzero ou evenodd.

O valor padrão é nonzero.
length-percentage

Obrigatório. Especifica os pontos que definem o polígono. Isso pode ser uma medida ou um valor percentual.

Cada ponto é um par de coordenadas x e y. 0 0 define o canto superior esquerdo, 100% 100% define o canto inferior direito.

Detalhes técnicos

Versão: Módulo de Forma CSS Nível 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

páginas relacionadas

Referência:propriedade clip-path

Referência:propriedade shape-outside

Referência:Função circle()

Referência:Função ellipse()

Referência:Função inset()