La shape-outsidepropiedad controla cómo el contenido se ajustará al cuadro delimitador de un elemento flotante. Normalmente, esto es para que el texto pueda volver a fluir sobre una forma como un círculo, una elipse o un polígono:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Es importante tener en cuenta que esta propiedad solo funcionará en elementos flotantes por ahora, aunque es probable que esto cambie en el futuro. La shape-outsidepropiedad también se puede manipular con transiciones o animaciones.
Valores
circle(): para hacer formas circulares.ellipse(): para realizar formas elípticas.inset(): para hacer formas rectangulares.polygon(): para crear cualquier forma con 3 o más vértices.url(): identifica qué imagen debe usarse para ajustar el texto.initial: la zona de flotación no se ve afectada.inherit: hereda elshape-outsidevalor de los padres.
Los siguientes valores identifican qué referencia del modelo de caja debe usarse para colocar la forma dentro:
margin-boxpadding-boxborder-box
Estos valores deben ser añadidos al final, por ejemplo: shape-outside: circle(50% at 0 0) padding-box. Por defecto margin-boxse utilizará la referencia.
elipse()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )La ellipse()función requiere los valores de los radios para el eje x, y de la elipse seguidos de las coordenadas para colocar el centro de la forma dentro de su cuadro delimitador. Por ejemplo, el ejemplo anterior colocará el centro de la elipse en el centro vertical y horizontal del .elementdiv:
Aunque la demostración anterior puede sugerir que estamos cambiando la forma del divmismo, si agregamos bordes y una imagen de fondo, encontraremos que el cuadro delimitador sigue siendo rectangular:
Quizás sea mejor pensarlo de esta manera: con la shape-outsidepropiedad estamos cambiando la relación de otros elementos alrededor de un elemento, no la geometría del elemento en sí. Para solucionarlo, necesitaremos usarlo shape-outsidejunto con la clip-path()propiedad, como en este ejemplo:
circulo()
.element ( shape-outside: circle(50%); )Esta función crea un círculo y, en el ejemplo de código anterior, creará un círculo con un radio de la mitad de la altura y el ancho de .element. La circle()función también puede usar la misma sintaxis para colocar la forma dentro.
url ()
.element ( shape-outside: url('circle.png.webp'); )En este caso, tenemos dos imágenes flotantes, una a cada lado de un bloque de texto. Dado que ambas imágenes tienen la shape-outsidepropiedad establecida, el texto debajo evitará esos dos flotadores.
También es posible establecer la shape-image-thresholdpropiedad que informará al navegador qué píxeles, dependiendo de su transparencia, deben crear la forma. Por ejemplo:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )En este ejemplo, los únicos píxeles que crearán la forma deben tener un 50% de transparencia o más. Los valores de 0.0(transparente) a 1.0(opaco) son válidos.
polígono()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Esta función crea cualquier forma que tenga tres o más vértices, por ejemplo:
Es importante tener en cuenta que si esta propiedad se va a animar, requiere la misma cantidad de vértices cuando declara el estado animado:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )recuadro()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()es una función para hacer formas rectangulares, toma cinco parámetros pero el quinto, border-radiuses opcional. Los otros argumentos son compensaciones hacia adentro desde el borde de .element:
Arriba tenemos un elemento que tiene 200 px de ancho por 200 px de alto y estamos compensando la forma dentro de 50 px en todas las direcciones excepto en el lado izquierdo. De esta manera, el texto se ajustará por encima de la forma aunque el div se extienda hasta la parte superior.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 37 | 62 | No | 79 | 7.1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |