Codeschnipsel: Flaggen

Ich zeige euch, wie man lineare Flaggen erstellt. Ihr könnt sie zum Beispiel als Trennlinie verwenden.
So sieht das Ganze aus:



Zunächst kümmern wir uns um den CSS-Style:
.flagge { height: 40px; width: 100%; background: linear-gradient(to bottom, #000 25%, #a2a2a2 25%, #a2a2a2 50%, #fff 50%, #fff 75%, #7e007e 75%); }
Als erstes definieren wir die Höhe der Flagge. Ihr könnt sie so groß machen wie ihr wollt. Am besten funktioniert ein Vielfaches der Streifen. Also wenn ihr 4 Streifen habt und eine etwa 50px hohe Flagge wollt, dann nehmt entweder 48px oder 52px. Denn: 50/4=12,5px. Ein ungerader Wert ist schlecht, weil es zu fehlerhaften Darstellungen kommen kann. Also runden wir entweder auf oder ab, denn 12*4=48 und 13*4=52. So stellt ihr sicher, dass die einzelnen Streifen exakt angezeigt werden und es keine Fehler gibt.
Als nächstes die Breite. Auch die könnt ihr einstellen wie ihr wollt. Probiert einfach unterschiedliche Werte z.B. in % oder px aus.
Zum Schluss das wichtigste: Der Verlauf. Ihr könnt theoretisch unendlich viele Streifen erstellen. Um die Prozentwerte zu ermitteln, müsst ihr 100% durch die Anzahl der Streifen teilen und wieder addieren. Also 100%/4=25%. 25% ist der erste Schritt. Dann kommt 25%+25%=50%. Dann 50%+25%=75%. Die 100% am Ende werden weggelassen, genauso wie 0% am Anfang.
Mit linear-gradient werden eigentlich Verläufe erstellt. Wir verwenden einen kleinen "Trick", um harte Übergänge zu schaffen.

<div class="flagge"></div>

267 Klicks heute · 260383 Klicks gesamt · Impressum · Disclaimer