Quelltext der Seite Vorlage:Diagonale Linie

<includeonly>{{#switch: {{{Typ|}}}
     | lu->ro = <div class="line-ll2ur" style="left:0px; top:0px; /* point A */"><!--
        --><div style="
        border-width: 0px 0px {{Pixel2Number|{{{Höhe|50px}}}}}px {{Pixel2Number|{{{Breite|100}}}}}px;        /* point B (minus A) trbl */
        border-bottom-color: {{{Farbe|black}}};                 /* line color */
        "></div><!--
        --><div style="
        left: {{Pixel2Number|{{{Dicke|2}}}}}px;                                /* line width */
        border-width: 0px 0px {{Pixel2Number|{{{Höhe|50px}}}}}px {{Pixel2Number|{{{Breite|100}}}}}px;        /* point B (minus A) */
        border-bottom-color: {{{Hintergrund|white}}};               /* background color */
        "></div><!--
      --></div>
     | lo->ru | #default = <div class="line-ul2lr" style="left:0px; top:0px; /* point A */"><!--
      --><div style="
         left: {{Pixel2Number|{{{Dicke|2}}}}}px;                                /* line width */
          border-width: 0px {{Pixel2Number|{{{Breite|100}}}}}px {{Pixel2Number|{{{Höhe|50px}}}}}px 0px;        /* point B (minus A) */
          border-bottom-color: {{{Farbe|black}}};                 /* line color */
        "></div><!-- 
      --><div style="
          border-width: 0px {{Pixel2Number|{{{Breite|100}}}}}px {{Pixel2Number|{{{Höhe|50px}}}}}px 0px;        /* point B (minus A) */
          border-bottom-color: {{{Hintergrund|white}}};               /* background color */
        "></div><!-- 
      --></div>
    }}<!--
 --></includeonly><noinclude><!-- 

 (4) Knappe Dokumentation hier.
     Oder mit {{Dokumentation}} ausführlich
-->
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 [http://erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/ Erez]

Beispiele:
 <nowiki>{{Diagonale Linie}}</nowiki>
Text {{Diagonale Linie}} Text Text Text Text



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

{{Todo|Fix? Extrahiert man den HTML Code lokal, funktioniert es. Hier auf dem Wiki nicht. Problem ist z-index:-1|Diagonale Linie}}
[[Kategorie: Vorlagenprogrammierung]]
[[Kategorie: Formatierung]]
[[Kategorie: Vorlagen/Templates]]
<!-- 

 (5) Sortierung
-->{{SORTIERUNG: {{SEITENNAME Umlaute konvertiert}} }}
</noinclude>