Wie man eine Raute geformte Bild in CSS

March 9

Beginnen mit einem quadratischen Bild und wenden einige CSS-Transformationen um eine Raute-Form-Image zu erstellen. Dieser Effekt funktioniert in allen modernen Browsern, einschließlich Internet Explorer 9 und höher. Neigen eines quadratischen Bild wird eine Raute erstellt, die Sie dann auch drehen können. Zum Beispiel macht eine Raute, die nach oben zeigt eine Rautenform. In einigen Fällen wird das Bild aussehen schlecht wenn verzerrt, so dass Experimente Ihnen hilft, festzustellen, was am besten aussieht.

Anweisungen

1 Gehen Sie in den HTML-Code und fügen Sie ein Bild:

< Img src="path/to/image.png" Alt = "My Image" Id = "Rhombus" / >

Ändern Sie das Attribut "Src" auf Ihrem Image-Datei hinzu. Fügen Sie ein ID-Name, ist einzigartig aber unvergesslich, so dass das Bild später in CSS angesprochen werden kann.

2 Blättern Sie bis an die Spitze Ihres HTML-Codes und finden Sie die "< Stil >" Tags. Fügen Sie die Tags hinzu, wenn Sie sie dort nicht finden:

< Typ style = "Text/Css" >< / style >

Alternativ, wenn Ihre Website verwendet eine externe CSS-Datei für seine Stylesheet öffnen, die und beginnen unten neue Stil-Code hinzufügen.

3 Schreiben Sie eine Stilregel, die Ziel der ID-Name des Bildes:

Rhomus {} }

4 Legen Sie die Eigenschaft "Transform" zu "zerren" und geben sie einen Winkel in Grad:

Rhomus {} Transform: skew(25deg);-Webkit-Transform: skew(25deg);-Moz-Transform: skew(25deg);-ms-Transform: skew(25deg);-o-Transform: skew(25deg);}

Sie brauchen diesen Code-Versionen für alle gängigen Browser plus die standard-Eigenschaft ohne Präfix. Die "-Webkit" Präfix unterstützt Chrome und Safari, "-Moz" unterstützt Firefox, "-ms" unterstützt Internet Explorer und "-o" Opera unterstützt. Es gibt keine Filter Verzerren von Bildern in Internet Explorer 6 bis 8.

5 Wenn Sie möchten, mit "in der Eigenschaft"Transform"drehen", die Rhomus zu drehen:

Rhomus {} Transform: 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);}

Tipps & Warnungen

  • Experimentieren Sie mit dem Code in einem Browser und Duplizieren Sie die Eigenschaften für andere Browser hinter der Raute um das gewünschte Aussehen bekommen.
  • Beim Browser ohne Präfixe unterstützen beginnen "Transformieren" können Sie die zusätzliche vorangestellten Zeilen CSS-Code entfernen.
  • Dieser CSS-Code wird nicht neigen oder drehen Sie das Bild in Internet Explorer 6 bis 8. Das Bild wird als normal in diesen Browsern angezeigt.

SIE KÖNNEN AUCH GERNE