<basic-shape>

Resumen

El tipo <basic-shape> puede ser especificado usando funciones de figura (shape) b√°sicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <basic-shape>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.

Figuras posibles

Las siguientes figuras son soportadas. Todos los valores <basic-shape> usan notaci√≥n funcional y son definidos aqu√≠ usando la sintaxis de definici√≥n de valor.

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

Define un rect√°ngulo incrustado.

Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo 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 rect√°ngulo incrustado usando la sintaxis de abreviatura de border-radius.

Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión 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 especificación, el resultado es un área flotante vacía.

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

<fill-rule> representa la regla de llenado (en-US) usada para determinar el √°rea interior del pol√≠gono. 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 v√©rtice i del pol√≠gono.

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

El argumento <shape-radius> representa a r, el radio del c√≠rculo. Los valores negativos son inv√°lidos. 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> (en-US) define el centro del círculo. 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 inv√°lidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.

El argumento <position> (en-US) 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 círculo o elipse. Su valor predeterminado es closest-side.

closest-side usa la longitud desde el centro de la figura hasta el borde m√°s cercano de la caja de referencia. Para c√≠rculos, es el lado m√°s cercano en cualquier dimensi√≥n. Para elipses, es el lado m√°s cercano en la dimensi√≥n del radio.

farthest-side use la longitud desde el centro de la figura hasta el lado m√°s alejado de la caja de referencia. Para c√≠rculos, es el lado m√°s alejado en cualquier dimensi√≥n. Para elipses, es el lado m√°s alejado en la dimensi√≥n del radio.

Valores Calculados de Figuras B√°sicas

Los valores en una funci√≥n <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-US) en circle() o  ellipse() es calculado como un par de separaciones (horizontal y despu√©s vertical) desde el origen superior izquierdo, cada uno dado como combinaci√≥n 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.

Interpolación de Figuras Básicas

Para interpolar dos figuras, se aplican las reglas a continuaci√≥n. Los valores en la funci√≥n 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 id√©nticos (por ejemplo, tener nonzero en la misma posici√≥n 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()circle(), y ninguno de los radios usa las palabras clave closest-sidefarthest-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 pol√≠gonos tienen el mismo n√ļmero de v√©rtices y usan la misma regla <fill-rule> (en-US), se interpola entre cada valor de la funci√≥n de figura.
  • En cualquier otro casa no se especifica la interpolaci√≥n.

Ejemplos

TODO

Especificaciones

Especificicación Estatus Comentarios
CSS Shapes Module Level 1
La definición de '<basic-shape>' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte b√°sico (Yes) 47 (47) Sin soporte Sin soporte (Yes)
inset() ? Sin soporte Sin soporte Sin soporte ?
Animaciones ? 49 (49) Sin soporte Sin soporte ?
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte b√°sico (Yes) (Yes) 47.0 (47) (behind a pref) Sin soporte Sin soporte (Yes)
inset() ? (Yes) Sin soporte Sin soporte Sin soporte ?
Animaciones ? ? 49.0 (49) Sin soporte Sin soporte ?

Véase también