Vorlage:Diagonale Linie

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search

Diese Vorlage erzeugt mit Hife von CSS und den border-Eigenschaften eine diagonale Linie und hat folgende Vorlagenparameter:

  • Typ: „lo->ru“ (Voreinstellung = links oben nach rechts unten), „lu->ro“ (links unten nach rechts oben)
  • Farbe (Voreinstellung = black)
  • Hintergrund (Voreinstellung = white)
  • Breite (Voreinstellung = 100px)
  • Höhe (Voreinstellung = 50px)
  • Dicke (dies ist die ungefähre Dicke der Linie; Voreinstellung = 2px)

Positioniert wird sie als (Hintergrund)Box relativ bei left:0px und top:0px gesetzt. Die Idee und der Code stammt von Erez

Beispiele:

{{Diagonale Linie}}
Text
Text Text Text Text


{{Diagonale Linie | Farbe= green | Breite=150px | Typ = lu->ro}}
Text
Text Text Text Text

Technische Abhängigkeiten

/* diagonal lines */
  /* lower left to upper right */
  .line-ll2ur { 
    position:relative; /* doesn't have to be absolute */
    z-index: -1;         /* places the line behind other elements */
  }
  .line-ll2ur div {
    position:absolute;
    left: 0px; top: 0px;
    border-left-color: transparent;
    border-style: solid;
  }
  /* upper left to lower right */
  .line-ul2lr {
    position:relative; /* doesn't have to be absolute */
    z-index: -1;         /* places the line behind other elements */
  }
  .line-ul2lr div {
    position:absolute;
    left: 0px; top: 0px;
    border-right-color: transparent;
    border-style: solid;
  }
Qsicon inArbeit-05.svg
To do: Fix? Extrahiert man den HTML Code lokal, funktioniert es. Hier auf dem Wiki nicht. Problem ist z-index:-1
See also Kategorie: Task.