Iniziare con un'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 di un'immagine quadrata creerà un rombo che poi potete anche ruotare. Ad esempio, un rombo che punta verso l'alto fa una forma di diamante. In alcuni casi l'immagine avrà un aspetto scadente quando inclinate così sperimentazione ti aiuterà a determinare ciò che sembra meglio.

Istruzioni

1

Vai al codice HTML e aggiungere un'immagine:

< img src="path/to/image.png" alt = "My Image" id = "rombo" / >

Modificare l'attributo "src" per puntare al file di immagine. Aggiungere un nome di ID che è univoco ma memorabile, così puoi scegliere come target l'immagine in CSS più tardi.

2

Scorrere fino all'inizio del codice HTML e trovare il tag "< style >". Aggiungere i tag se non li trovi lì:

< style type = "text/css" >
< / stile >

In alternativa, se il tuo sito Web utilizza un file CSS esterno per il foglio di stile che aprire e iniziare ad aggiungere nuovo codice di stile verso il basso.

3

Scrivere una regola di stile destinato a nome identificativo dell'immagine:

rhomus {

}

4

Impostare la proprietà di "trasformazione" di "inclinare" e dargli un angolo in gradi:

rhomus {

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

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

5

Ruotare il rhomus, se si desidera, utilizzando "ruotare" nella proprietà "transform":

rhomus {

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

Consigli & Avvertenze

• Sperimentare con il codice in un unico browser e duplicare le proprietà per gli altri browser dopo avere ottenuto il rombo a guardare nel modo desiderato.
• Quando i browser iniziano a sostegno di "trasformare" senza prefissi è possibile rimuovere le linee extra con prefissate di codice CSS.
• Questo codice CSS non inclinare o ruotare l'immagine in Internet Explorer 6 a 8. L'immagine apparirà come normale in questi browser.