45 gradi + Box Ombra - usando solo i CSS

Question

Ho bisogno di ricreare il seguente disegno utilizzando solo CSS:

Quello che stai vedendo nella foto è la parte superiore di un contenitore sito web - i "link" fanno parte del menu principale.

Così com'è, ho creato il contenitore, ma non sono sicuro di come fare per rendere l'inclinazione sulla navigazione senza l'utilizzo di un'immagine.

Per la cronaca: Preferirei non utilizzare un'immagine come le possibilità della scatola ombra su l'inclinazione corrispondenza con scatola di ombra reso dal browser sono sottili a nessuno, soprattutto quando si tratta di più browser.

Stavo pensando lungo le linee di un div posizionato e ruotato con uno sfondo bianco e l'ombra scatola, ma non sono stato in grado di costruire ancora.

Tutte le idee?

Answer 1

C'è qualcosa che si chiama Carta vetrata che può aiutare a trasformare gli elementi, anche in IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

Si può semplicemente collegarlo al vostro sito e siete a posto.

Inoltre è possibile utilizzare le trasformazioni CSS3, che hai chiesto nella tua domanda: "Usando nient'altro che CSS"

Per fare questo devi usare:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

E grazie a Josh e Robert per l'equivalente Opera:

-o-transform: rotate(45deg);

Internet Explorer scenderà ClearType su qualsiasi testo che ha un filtro applicato ad esso. Ma è possibile aggiungere ulteriore elemento vuoto dentro quello principale e applicare il filtro a questo elemento in più. Dopo questo ClearType non sarà rovinato e lo stesso risultato può essere raggiunto.

Answer 2

Per la rotazione, siete alla ricerca di:

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

Tenete a mente, che la rotazione è un attributo CSS3, in modo da non avete intenzione di ottenere lo stesso comportamento in tutti i browser. Invece di fare solo l'inclinazione con un'immagine, probabilmente sarebbe meglio per ricreare tutto il contorno. Mi piacerebbe approccio con:

1. La sezione di intestazione, che avrebbe l'inclinazione, l'ombra, lo sfondo del menu e l'imbottitura nella parte superiore del contenuto, più o meno come lo screenshot qui.
2. immagine An che può ripetere-y per tutto il corpo di contenuto con un ombra.
3. La sezione di piè di pagina.

È inoltre possibile utilizzare librerie esterne per tentare di attributi CSS3 ricreare ma le immagini può essere il modo più semplice come si sa come faranno rendono.

Answer 3

Penso che si possa utilizzare le tecniche da http://nicolasgallagher.com/pure -css-speech-bubbles / demo /

Questo è davvero un bel compilazione e ispirazione per usare i CSS. Godetevi.

PS:., È più sicuro che trasforma CSS3

Answer 4

La rotazione sembra inutile. Vorrei provare a utilizzare un effetto triangolo CSS.

ho intenzione di assumere il vostro link sono in una ul in modo che il CSS si potrebbero selezionare ul:before e farne la forma corretta.

Non so cosa accadrà con l'box-shadow, ma forse vale la pena un colpo, e probabilmente sarà più facile per eseguire l'allineamento in IE senza ricorrere a JavaScript.