è possibile fare livelli CSS forma di immagine ...livelli CSS Multi-sagomati non rettangolare Strato CSS
So che possiamo avere immagini di questa forma e con trasparente sfondi possiamo avere strati come questi ... ma non voglio strati CSS come bordi reali come queste forme ... c'è un modo CSS, jQuery o qualsiasi cosa ....
Nota: per 'forme come queste Voglio dire non solo questi tre esempi, ma forme che potrei definire '
Se sono necessarie forme in HTML, è necessario incorporare o generare SVG. Si consiglia di dare un'occhiata a Raphaël.
Normale HTML e CSS renderanno solo i rettangoli.
CSS è un linguaggio per lo styling di documenti, non dando loro una struttura semantica. Ergo, non c'è qualcosa di conosciuto come "css layer" o "css shape". Gli oggetti nei tuoi documenti HTML, compresi i div che a volte vengono erroneamente definiti "layers", possono essere indicati come indici di visualizzazione davanti o dietro ad altri oggetti, dando l'illusione di "livelli".
E no, non ci sono oggetti dentro e documenti HTML generici che possono avere forme arbitrarie. A volte puoi incidere su forme di riquadri standard per creare oggetti creativi combinando molte forme poco conosciute, ad esempio con lo slants hack.
Che cosa si potrebbe essere alla ricerca di qualcosa di simile è la nuova canvaselement in HTML5 e le altre soluzioni di grafica vettoriale, come SVG che hanno portato ad essa.
Non esiste un modo diretto per manipolare la forma di un elemento DOM: tutti gli elementi sono rettangolari (se sono display:block;) o sono formati dal loro contenuto di testo (se sono display:inline;).
Il DOM HTML ruota intorno a riquadri rettangolari, quindi non si otterranno riquadri casuali che lo utilizzano.
Dipende esattamente da quello che stai cercando di fare. Se tutto ciò che vuoi è disegnare forme, allora starai meglio usando canvas, SVG o VML, a seconda esattamente di cosa vuoi fare e del supporto del browser che ti serve.
Canvas è una tecnologia HTML5 che offre in pratica un blocco da disegno nel browser su cui è possibile disegnare con Javascript. Ti permette di creare e animare pixel art 2D.
SVG e VML sono linguaggi vettoriali. Eseguono all'incirca lo stesso compito, ma VML è specifico per Internet Explorer mentre la maggior parte degli altri browser supporta SVG. (IE9 supporterà anche SVG, ma non è ancora ampiamente utilizzato). Ancora una volta puoi lavorare con questi usando Javascript, e il modo migliore per farlo in un browser cross-browser è usare lo Raphael libraray, che ti dà un'API per creare la tua grafica, e poi la traduce in VML o SVG dietro le quinte secondo al browser.
Si potrebbe anche, ovviamente, avere solo una grafica di sfondo per la tua scatola nella forma desiderata 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 davvero farlo usando i CSS, forse per avere una scatola che gli altri elementi di testo si avvolgeranno senza intoppi, avrete difficoltà.Ci sono alcuni hack che puoi usare per ottenere questo tipo di effetti, ma nessuno di questi è esattamente quello che stai cercando.
Un'opzione può essere trasformazioni CSS: consente di ruotare/inclinare/ecc. Una casella. I lati negativi sono che la scatola rimane a forma di scatola (quindi nessun poligono), e il contenuto è ruotato e inclinato così come il contorno del riquadro, quindi potrebbe non essere adatto a ciò che stai cercando di fare. Inoltre, potrebbe non funzionare su tutti i browser, anche se può essere fatto funzionare nella maggior parte dei casi.
È possibile creare scatole con bordi diagonali falsi facendo confusione con gli stili del bordo. Vedi http://www.cssplay.co.uk/menu/tree.html per un buon esempio. Ma di nuovo, non è perfetto.
Oltre a questo, devi solo creare più riquadri e posizionarli per ottenere la corrispondenza più simile alla forma che stai cercando di ottenere.
Spero che questo aiuti.
È possibile fare la prima forma (il parallelogramma-tipo cosa) nel recente Safari, Chrome, Firefox e Opera tramite CSS trasforma:
A parte questo, no. CSS è tutto sui rettangoli.
Puoi ampliare un po 'di più ciò che desideri ottenere? (A proposito, non esiste una cosa come "livelli" nei CSS). – RoToRa
I DIV in stile CSS con diversi indici Z sono conosciuti come livelli Mr.By-The-Book – Moon