<basic-shape>

Figuras posibles

Las siguientes figuras son soportadas. Todos los valores <basic-shape> usan notacin funcional y son definidos aqu usando la sintaxis de definicin de valor.

inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

Define un rectngulo incrustado.

Cuando se proporcionan los cuatro primeros argumentos, representan la separacin superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectngulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.

Los argumentos opcionales <border-radius> definen esquinas redondeadas para el rectngulo incrustado usando la sintaxis de abreviatura de border-radius.

Cuando un par de valores inset en cualquier dimensin suman un valor mayor al lmite de la dimensin disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se est definiendo una figura que no encierra ningun rea. Para esta especificacin, el resultado es un rea flotante vaca.

polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<fill-rule> representa la regla de llenado usada para determinar el rea interior del polgono. Los valores posibles son nonzero y evenodd. El valor predeterminado es nonzero.

Cada elemento par de la lista representa xi y yi - las coordenadas del eje x y el eje y en el vrtice i del polgono.

circle()

circle( [<shape-radius>]? [at <position>]? )

El argumento <shape-radius> representa a r, el radio del crculo. Los valores negativos son invlidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como sqrt(width^2+height^2)/sqrt(2).

El argumento <position> define el centro del crculo. Su valor predeterminado es center.

ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

El argumento <shape-radius> representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son invlidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.

El argumento <position> define el centro de la elipse. Su valor predeterminado es center.

Los argumentos no definidos arriba son definidos de esta forma:

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Define un radio para un crculo o elipse. Su valor predeterminado es closest-side.

closest-side usa la longitud desde el centro de la figura hasta el borde ms cercano de la caja de referencia. Para crculos, es el lado ms cercano en cualquier dimensin. Para elipses, es el lado ms cercano en la dimensin del radio.

farthest-side use la longitud desde el centro de la figura hasta el lado ms alejado de la caja de referencia. Para crculos, es el lado ms alejado en cualquier dimensin. Para elipses, es el lado ms alejado en la dimensin del radio.

Valores Calculados de Figuras Bsicas

Los valores en una funcin <basic-shape> son calculados segun se especifica, con estas excepciones:

• Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
• Un valor <position> en circle() o ellipse() es calculado como un par de separaciones (horizontal y despus vertical) desde el origen superior izquierdo, cada uno dado como combinacin de una longitud absoluta y un porcentaje.
• Un valor <border-radius> en inset() es calculado como una lista expandida de ocho valores <length> o de porcentaje.

Interpolacin de Figuras Bsicas

Para interpolar dos figuras, se aplican las reglas a continuacin. Los valores en la funcin de figura se interpolan como una lista simple. La lista de valores se interpola como length, percentage, o calc donde sea posible. Si los valores listados no son de los de esos tipos pero son idnticos (por ejemplo, tener nonzero en la misma posicin en ambas listas), s se interpolan esos valores.

• Ambas figuras deben usar la misma figura de referencia.
• Si ambas figuras son del mismo tipo, ellipse() o circle(), y ninguno de los radios usa las palabras clave closest-side o farthest-side keywords, se interpola entre cada valor de las funciones de figura.
• Si ambas figuras son de tipo inset(), se interpola entre cada valor de las funciones de figura.
• Si ambas figuras son de tipo polygon(), ambos polgonos tienen el mismo nmero de vrtices y usan la misma regla <fill-rule>, se interpola entre cada valor de la funcin de figura.
• En cualquier otro casa no se especifica la interpolacin.

Ejemplos

TODO

Especificaciones

Compatibilidad con navegadores

Vase tambin

• clip-path
• shape-outside