Multi-Shaped CSS Livelli \ layer CSS non rettangolari

Question

è possibile fare Livelli CSS a forma la seguente immagine ...

So che possiamo avere immagini di questa forma e con sfondi trasparenti possiamo avere Livelli forma come questi ... ma non voglio Livelli CSS ai confini attuali come queste forme ... c'è un modo CSS, jQuery o niente ....

Nota: da 'forme come questi non mi riferisco solo questi tre esempi, ma forme che potrei definire'

Answer 1

Se avete bisogno di forme in HTML, allora si dovrebbe incorporare o generare SVG. Si consiglia di dare un'occhiata a Raphaël .

Normale HTML e CSS sarà solo il rendering rettangoli.

Answer 2

Non c'è un modo diretto per manipolare la forma di un elemento DOM -. Tutti gli elementi sono o rettangolare (se sono display:block;) o modellati dal loro contenuto di testo (se sono display:inline;)

I ruota HTML DOM scatole rettangolari intorno, in modo da non avete intenzione di ottenere scatole a forma casuali che utilizzano tale.

Dipende esattamente quello che stai cercando di fare. Se tutto quello che vogliamo fare è disegnare forme, allora sarebbe meglio utilizzando tela, SVG o VML, a seconda esattamente quello che vuoi fare e il supporto del browser è necessario.

Canvas è una tecnologia HTML5 che fondamentalmente ti dà un foglio da disegno nel browser, che è possibile disegnare su JavaScript. Esso consente di creare e animare pixel art in 2D.

SVG e VML sono vettore linguaggi grafici. Essi svolgono più o meno lo stesso compito, ma VML è specifico per Internet Explorer, mentre la maggior parte degli altri browser supportano SVG. (IE9 supporterà SVG pure, ma non è in uso diffuso ancora). Anche in questo caso si può lavorare con questi utilizzando Javascript, e il modo migliore per farlo in modo cross-browser è quello di utilizzare la Raphael Libraray , che ti dà un'API per creare la grafica, e quindi traduce a VML o SVG dietro le quinte a seconda del browser.

Si potrebbe anche, naturalmente, basta avere un'immagine di sfondo per la tua casella nella forma che si desidera con aree trasparenti al di fuori della forma, e utilizzare solo l'area all'interno della scatola. Non sarà davvero una scatola poligonale, ma se lo fai bene potrebbe sembrare altrettanto buono.

Se si vuole veramente farlo utilizzando i CSS - forse per avere una casella che altri elementi di testo saranno avvolgere intorno senza problemi, si sta andando a lotta. Ci sono un paio di hack che è possibile utilizzare per ottenere questi tipi di effetti, ma nessuno di loro sono esattamente quello che stai cercando.

Una possibilità potrebbe essere trasformate di CSS: questo consente di ruotare / skew / etc una scatola. I lati negativi sono che i resti della scatola-scatola a forma di (quindi niente poligoni), e il contenuto sono ruotate e oblique così come il contorno di dialogo, quindi non può soddisfare quello che stai cercando di fare. Inoltre, potrebbe non funzionare su tutti i browser, anche se può essere fatto per il lavoro nella maggior parte dei casi.

E 'possibile creare finestre con bordi diagonali falsi da fare in giro con gli stili di confine. Vedere http://www.cssplay.co.uk/menu/tree.html per un buon esempio. Ma ancora una volta, non è perfetto.

Oltre a questo, non vi resta che creare più scatole e li grado di ottenere la corrispondenza più vicina per la forma che si sta cercando di raggiungere.

La speranza che aiuta.

Answer 3

CSS è un linguaggio per lo styling documenti, non dando loro struttura semantica. Ergo, non c'è qualcosa di noto come un "layer css" o "forma css". Gli oggetti nei documenti HTML, inclusi i div che a volte vengono erroneamente definiti come "strati", possono essere dati gli indici di se mostrano di fronte o dietro altri oggetti, dando l'illusione di "strati".

E no, non ci sono oggetti in documenti HTML e generici che possono avere forme arbitrarie. a volte si può incidere su forme di dialogo standard di fare le cose creative, combinando un sacco di piccoli conosciuti forme, come si fa con il inclinazioni mod .

Che cosa si potrebbe essere alla ricerca di qualcosa di simile è il nuovo tela elemento in HTML5 e altre soluzioni vettore grafici come SVG che hanno portato ad esso.

Answer 4

Si può fare la prima forma (il parallelogramma-tipo cosa) nel recente Safari, Chrome, Firefox e Opera tramite trasformazioni CSS:

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/En/CSS/Using_CSS_transforms
• (www.opera.com è giù in questo momento, ma si desidera http://www.opera.com/docs/specs/presto26/css/transforms/ )
• http://hacks.mozilla.org/2009/06/3d -transforms-isocube /

A parte questo, no. CSS è tutto di rettangoli.