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:
Fällt euch irgend ein anderer Trick ein?
Martin
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>
Martin