Función CSS polygon()

Definición y uso

CSS polygon() Funciones utilizadas para definir un polígono.

polygon() Funciones con clip-path Atributos y shape-outside Atributos utilizados juntos.

Ejemplo

Ejemplo 1

Cortar la imagen en polígono:

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

Prueba personalmente

Ejemplo 2

Cortar la imagen en polígono:

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

Prueba personalmente

Ejemplo 3

Uso polygon()、clip-path y 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%);
}

Prueba personalmente

Sintaxis CSS

polygon(fill-rule, length-percentage)
Valores Descripción
fill-rule

Opcional. Especifica la regla de relleno. Puede ser nonzero o evenodd.

El valor predeterminado es nonzero.
length-percentage

Obligatorio. Especifica los puntos que definen el polígono. Esto puede ser una longitud o un porcentaje.

Cada punto es una par de coordenadas x e y. 0 0 define la esquina superior izquierda, 100% 100% define la esquina inferior derecha.

Detalles técnicos

Versión: Módulo de Forma CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero soportó esta función.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

páginas relacionadas

Referencia:atributo clip-path

Referencia:atributo shape-outside

Referencia:Función circle()

Referencia:Función ellipse()

Referencia:Función inset()