Hvordan lage en Rhombus formet Bilde i CSS

Start ut med et firkantet bilde og bruke noen CSS transformasjoner for å skape en rombe-formet bilde. Denne effekten virker i alle moderne nettlesere, inkludert Internet Explorer 9 og nyere. Forvrenger et firkantet bilde vil skape en rombe som du deretter kan også rotere. For eksempel, en rombe som peker gjør oppover en diamant form. I noen tilfeller vil bildet ser dårlig når skjevt så eksperimentering vil hjelpe deg å finne ut hva som virker best.

Bruksanvisning

1 Gå til HTML-koden og legge til et bilde:

<Img src = "sti / til / image.png" alt = "Mitt bilde" id = "rombe" />

Endre "src" -attributtet til å peke på bildefilen. Legg et ID-navn som er unik, men minneverdig, slik at du kan målrette bildet i CSS senere.

2 Rull opp til toppen av HTML-koden og finne "<style>" tags. Legg kodene hvis du ikke finner dem der:

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

Alternativt, hvis nettsiden bruker en ekstern CSS-fil for sin stil åpne den og begynne å legge ny stil kode til bunnen.

3 Skriv en stil regel som er rettet mot bildets ID navn:

Rhomus {

}

4 Still "transformere" eiendom til "skew" og gi den en vinkel i grader:

Rhomus {

transform: skew (25deg);
-webkit-transform: skew (25deg);
-moz-transform: skew (25deg);
-MS-transform: skew (25deg);
-o-transform: skew (25deg);
}

Du trenger versjoner av denne koden for alle de store nettleserne pluss standard eiendom uten prefiks. Den "-webkit" prefikset støtter Chrome og Safari, "-moz" støtter Firefox, "-MS" støtter Internet Explorer og "-o" støtter Opera. Det er ingen filter for å forskyve bilder i Internet Explorer 6 til 8.

5 Roter Rhomus, hvis du vil, ved hjelp av "roter" i "transformere" eiendom:

Rhomus {

transform: skew (25deg);
-webkit-transform: skew (25deg);
-moz-transform: skew (25deg);
-MS-transform: skew (25deg);
-o-transform: skew (25deg);
transform: rotere (90deg);
-webkit-transform: rotate (90deg);
-moz-transform: rotere (90deg);
-MS-transform: rotere (90deg);
-o-transform: rotate (90deg);
}

Hint

  • Eksperimenter med koden i en nettleser og kopiere egenskapene for andre nettlesere etter får rombe å se ut slik du vil.
  • Når nettlesere begynner å støtte "transformere" uten prefikser kan du fjerne de ekstra innledes linjer med CSS-kode.
  • Dette CSS koden vil ikke forskyve eller rotere bildet i Internet Explorer 6 til 8. Bildet vises som normalt i disse nettleserne.