Multi-Shaped capas CSS \ no rectangular capa CSS

StackOverflow https://stackoverflow.com/questions/3967668

Pregunta

Es posible hacer capas CSS en forma similar a la imagen siguiente ...

text alt

Sé que podemos tener imágenes de esta forma y con fondos transparentes podemos tener capas formadas como éstos ... pero no quiero capas CSS a las fronteras reales como estas formas ... ¿hay una manera de CSS, jQuery o cualquier cosa ....

Nota: por 'formas como estos me refiero no sólo estos tres ejemplos, pero las formas que podía definir'

¿Fue útil?

Solución

Si necesita formas en HTML entonces usted debe incrustar o generar IVS. Es posible que desee echar un vistazo a Raphaël .

Normal HTML y CSS simplemente hará que los rectángulos.

Otros consejos

No hay una forma directa de manipular la forma de un elemento DOM -. Todos los elementos son o rectangular (si están display:block;) o moldeadas por su contenido de texto (si están display:inline;)

Los gira en torno a HTML DOM cajas rectangulares, por lo que no va a conseguir cajas en forma aleatorios usando eso.

Depende exactamente lo que estamos tratando de hacer. Si todo lo que quiere hacer es dibujar formas, entonces sería mejor usar cualquiera de lienzo, SVG o VML, dependiendo exactamente lo que quiere hacer y el soporte de los navegadores que necesita.

Canvas es una tecnología HTML5 que básicamente le da un cuaderno de dibujo en el navegador que se puede dibujar en Javascript. Le permite crear y animar pixel art 2D.

SVG y VML son lenguajes gráficos de vectores. Realizan más o menos la misma tarea, pero VML es específico de Internet Explorer, mientras que la mayoría de los navegadores soportan SVG. (IE9 apoyará SVG así, pero no es de uso generalizado aún). Una vez más se puede trabajar con ellos usando Javascript, y la mejor manera de hacerlo de una manera multi-navegador es utilizar la Raphael libraray , que le da una API para crear sus gráficos, y después lo traduce a VML o SVG detrás de las escenas de acuerdo con el navegador.

Se podría también, por supuesto, sólo hay un gráfico de fondo para su cuadro en la forma que desee con las áreas transparentes de fuera de la forma, y ??sólo utilizar el área dentro de la caja. No va a ser realmente una caja poligonal, pero si lo haces bien podría parecer igual de bueno.

Si realmente desea hacerlo con CSS - tal vez tener una caja que otros elementos de texto se ajustará alrededor sin problemas, vas a la lucha. Hay unos cuantos trucos que puede utilizar para lograr este tipo de efectos, pero ninguno de ellos son exactamente lo que estás buscando.

Una opción puede ser transformadas CSS: Esto le permite rotar / inclinación / etc una caja. Los lados hacia abajo son que los restos de la caja en forma de caja (por lo que no hay polígonos), y el contenido se giran y sesgados, así como el contorno de cuadro, por lo que puede no satisfacer lo que estás tratando de hacer. Además, puede que no funcione en todos los navegadores, aunque puede llegar a funcionar en la mayoría de los casos.

Es posible crear cuadros con bordes diagonales falsos por jugar un poco con los estilos de borde. Ver http://www.cssplay.co.uk/menu/tree.html para un buen ejemplo. Pero, de nuevo, no es perfecto.

Aparte de eso, sólo tendrá que crear varias cajas y posición de ellos para obtener el valor más cercano a la forma que usted está tratando de lograr.

Espero que ayude.

CSS es un lenguaje para estilizar documentos, no darles estructura semántica. Ergo, no es algo que se conoce como una "capa de css" o "forma css". Los objetos en los documentos HTML, incluyendo divs que a veces se hace referencia erróneamente como "capas", se puede dar índices de si se muestran por delante o por detrás de otros objetos, dando la ilusión de "capas".

Y no, no hay objetos en HTML y documentos genéricos que pueden tener formas arbitrarias. A veces se puede piratear el cuadro de las formas convencionales de hacer cosas creativas mediante la combinación de un montón de pequeñas formas conocidas tales como se hace con el sesgos truco .

Lo que usted podría estar buscando es algo así como la nueva lienzo elemento de HTML5 y las otras soluciones de vectores gráficos tales como SVG que han conducido a la altura.

Se puede hacer la primera forma (la cosa de tipo paralelogramo) en los últimos Safari, Chrome, Firefox y Opera mediante transformaciones CSS:

Aparte de eso, no. CSS tiene que ver con rectángulos.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top