Inizia con una immagine di forma quadrata e applicare alcune trasformazioni CSS per creare un'immagine a forma di rombo. Questo effetto funziona in tutti i browser moderni, tra cui Internet Explorer 9 e versioni successive. Inclinazione un'immagine a forma quadrata creerà un rombo che poi è possibile ruotare anche. Ad esempio, un rombo che punta verso l'alto rende una forma di diamante. In alcuni casi, l'immagine sarà povera quando è asimmetrico in modo sperimentazione vi aiuterà a determinare qual è quella ottimale.

istruzione

1 Vai al tuo codice HTML e aggiungere un'immagine:

<Img src = "path / to / immagine.png" alt = "La mia immagine" id = "rombo" />

Modificare l'attributo "src" per puntare al file di immagine. Aggiungere un nome di ID univoco ma memorabile in modo da poter indirizzare l'immagine in CSS dopo.

2 Scorrere fino alla parte superiore del vostro codice HTML e trovare i "<style>" tag. Aggiungere i tag se non li trovate lì:

<Style type = "text / css">
</ Style>

In alternativa, se il vostro sito web utilizza un file CSS esterno per il suo foglio di stile aperto che e iniziare l'aggiunta di un nuovo codice di stile verso il basso.

3 Scrivi una regola di stile che gli obiettivi nome ID dell'immagine:

rhomus {

}

4 Impostare la proprietà di "trasformare" a "skew" e dargli un angolo in gradi:

rhomus {

trasformare: skew (25deg);
-webkit-transform: skew (25deg);
-moz-transform: skew (25deg);
-ms-transform: Skew (25deg);
-o-transform: skew (25deg);
}

Avete bisogno di versioni di questo codice per tutti i principali browser, più la proprietà standard senza un prefisso. Il prefisso "-webkit" supporta Chrome e Safari, "-moz" supporta Firefox, "-ms" supporta Internet Explorer e "-o" supporta Opera. Non vi è alcun filtro per inclinare le immagini in Internet Explorer 6 a 8.

5 Ruotare il rhomus, se si vuole, usando "Ruota" nella proprietà "trasformare":

rhomus {

trasformare: skew (25deg);
-webkit-transform: skew (25deg);
-moz-transform: skew (25deg);
-ms-transform: Skew (25deg);
-o-transform: skew (25deg);
transform: rotate (90deg);
-webkit-transform: rotate (90deg);
-moz-transform: rotate (90deg);
-ms-transform: rotate (90deg);
-o-transform: rotate (90deg);
}

Consigli e avvertenze

• Esperimento con il codice in un browser e duplicare le proprietà per altri browser dopo avere ottenuto il rombo di guardare nel modo desiderato.
• Quando i browser cominciano sostenere "trasformare" senza prefissi è possibile rimuovere le linee extra prefissati di codice CSS.
• Questo codice CSS non inclinare o ruotare l'immagine in Internet Explorer 6 a 8. L'immagine viene visualizzata come di consueto in questi browser.