Schräge Linie mittels HTML/CSS

Status
Nicht offen für weitere Antworten.
ManicMarble

ManicMarble

Erfahrenes Mitglied
Ich frage mich (und jetzt auch euch) ob es einen Trick gibt, um in HTML schräge Linien zu malen - und zwar ohne VML oder Grafiken, nur reines HTML mit CSS-Styles.

Gerade Linien sind ja kein Problem: ein 1-Pixel-breites bzw. hohes DIV.
Man könnte natürlich ganz viele DIVs mit Höhe und Breite 1px entlang der schrägen Linie platzieren (siehe Beispiel-Code unten). Das erzeugt natürlich bei ein paar längeren schrägen Linien gleich gigantische HTML-Dateien und die Performance ist unter aller Sau. (Ich habe zum Spaß mal mit PHP was gebaut, was auf diese Arte einen Kreis malt: Ein Kreis mit Durchmesser 600px ist fast schon eine Animation, man kann beim Seitenaufbau zugucken wie er entsteht.)

Hier meine Beispiel für eine (sehr kurze) schräge Linie:
PHP: 
<html>
  <head>
    <title>Linie</title>
    <style type="text/css">
      .linie {
        position:     absolute;
        overflow:     hidden;
        border-style: solid;
        border-width: 1px;
        border-color: #FF0000;
        width:        1px;
        height:       1px;
      }
    </style>
  </head>
  
  <body>
    
    <div class="linie" style="left:20; top:20;"></div>
    <div class="linie" style="left:21; top:21;"></div>
    <div class="linie" style="left:22; top:22;"></div>
    <div class="linie" style="left:23; top:23;"></div>
    <div class="linie" style="left:24; top:24;"></div>
    <div class="linie" style="left:25; top:25;"></div>
    <div class="linie" style="left:26; top:26;"></div>
    <div class="linie" style="left:27; top:27;"></div>
    <div class="linie" style="left:28; top:28;"></div>
    <div class="linie" style="left:29; top:29;"></div>
    <div class="linie" style="left:30; top:30;"></div>
    <div class="linie" style="left:31; top:31;"></div>
    <div class="linie" style="left:32; top:32;"></div>
    <div class="linie" style="left:33; top:33;"></div>
    <div class="linie" style="left:34; top:34;"></div>
    <div class="linie" style="left:35; top:35;"></div>
    <div class="linie" style="left:36; top:36;"></div>
    <div class="linie" style="left:37; top:37;"></div>
    <div class="linie" style="left:38; top:38;"></div>
    <div class="linie" style="left:39; top:39;"></div>
    <div class="linie" style="left:40; top:40;"></div>
    
  </body>
</html>
Fällt euch irgend ein anderer Trick ein?

Martin
 
Also ich kenne nur die Möglichkeit, Dreiecke mit css darzustellen. Schräge Linien sind schon was anderes -> Sorry, aber keine Ahnung wie du das so hinbekommen kannst.

Aber ist es denn zwingend erforderlich, alles im Code bzw auf Laufzeit zu machen?
 
Danke erstmal für die Antwort. Habe ich fast befürchtet.

Wie machst Du denn Dreiecke mit CSS?

Und was genau meinst Du mit:
MonoMental hat gesagt.:
Aber ist es denn zwingend erforderlich, alles im Code bzw auf Laufzeit zu machen?
Zum Vergrößern anklicken....
Im Code? Auf Laufzeit? :confused:
 
Dreiecke sind in css machbar:

Hier ein kleines Beispiel:
Code: 
<div style="border-top:20px solid red; border-left:20px solid white; width:0px; height:0px;"></div>

"Und was genau meinst Du mit:...."
-> Deine Frage war, wie du schräge Linien mit Html bzw Css hinbekommst. Es ist zwar nicht direkt nach Laufzeit, aber warum soll es vom Code her generiert werden? Solche Sachen lassen sich doch viel einfacher mit Grafiken lösen.!?

LG

der mono
 
Aaah. Die CSS-Dreiecke sind also eigentlich auch Vierecke und nutzen praktisch den Gehrungs-Effekt, wenn unterschiedlich-farbige Ränder an einer Ecke aufeinander stoßen. Hast recht, das hilft mir natürlich gar nicht weiter. Und ich hatte schon gehofft...

Die Linien müssen deshalb dynamisch erzeugt werden, weil ich Werte aus einer DB als eine Art Kurve (Liniendiagramm) darstellen möchte. Mit VML wäre super einfach, nur muss dazu der Browser mit VML-Unterstützung installiert worden sein und bei der Standard-Installation vom IE fehlt diese. Ich möchte den Usern nicht zumuten, das nachinstallieren oder downloaden zu müssen.

Hatte vorhin einen Hoffnungsschimmer als mir die "<map><area shape='poly'>"-Geschichte wieder eingefallen ist. Nur leider kann man den damit erzeugten Klick-Hotspots mit CSS-Styles wie "border" nicht beikommen. Wieder nix... :(

Ich glaub' ich geb's auf.
Martin
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück