Hvordan laver du en firkant med CSS?

Her er lige en lille fiks julegodte jeg stødte på da jeg forsøgte at lave en menu bestående af firkanter – eller rettere fluid firkanter!

Fordi hvordan laver man egentlig en fluid firkant? Altså en firkant der skalerer udfra hvilken container den befinder sig i. Og når jeg skriver firkant, så mener jeg egentlig kvadrant.

Ok, direkte til magien:

.fluid-firkant {
  width: 25%;
  /*Tricket:*/
  padding-bottom: 25%;
}

Og hvorfor nu det? Jo fordi padding-bottom angivet med procent, beregnes udfra elementets bredde og ikke højde, så ved at sætte padding-bottom til bredden af elementet har man pludselig en firkant, der skalerer udfra width – smukt :)

Så hvis du allerede havde nedenstående løsning i hovedet, så prøv lige at teste den en gang til.

/*Ikke fungerende firkant!*/
.firkant {
  width: 50%;
  height: 50%;
  background-color: pink;
}

Den vil kun virke hvis firkanten allerede er inde i en firkant, og så har vi pludselig hønen og ægget problematikken :D

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.