Om nah hoo pez nyeetz, Quincunx!
schon aus Neugier, da mir die
vh
Einheit bisher fremd war, habe ich ein wenig experimentiert und deinen Code etwas abgeändert.
Ich hab die Einheit vh
damals zwar ins Wiki geschrieben, allerdings auch gleich wieder vergessen.
vh und vw bieten allerdings eine elegante Lösung für quadratische Boxen, die im Juni gesucht war.
http://forum.de.selfhtml.org/archiv/2014/6/t217741/
Kein zugegebenermaßen einfallsreiches Getrickse mit absolut positionierten Pseudoelementen mehr nötig, Browserunterstützung top und da das Element selbst in seiner Größe beschränkt wird und nicht nur ein Bild eines Quadrates druntergelegt wird, lässt sich auch einfach mit (text-)overflow auf übergroße Inhalte reagieren.
Also in Anlehnung an das dabblet: Quadratischer, praktischer, besser
div
{
display: inline-block;
margin: 1em;
width: 30vh;
height: 30vh;
font: 24px Georgia, serif;
overflow: /* was gewünscht wird */
}
Matthias