nicht angemeldet
Ein Beispiel, ich versteh es nicht.
Hallo,
Vieleich kann mir jemand erklären wie es funktioniert.
Hier http://www.tantek.com/CSS/Examples/polygons.html ist ein Beispiel einer css anwendung (der effekt ist im IE nicht zusehen, ich seh es im mozilla1.1).
Es geht mir um die farbigen dreiecke, wie kommen die zu stande, keine grafik, kein schriftzeichen.
Ich seh nur "border" "margin" padding" "display", ich kann mir nicht vorstellen wie es zu der bildung der dreiecke kommt.
kann das jemand erläutern?
wäre schön.
die css datei: http://www.tantek.com/CSS/Examples/polygons.css
mfg, jan aus dresden
-
Hi,
Ich bin jetzt seit einer Stunde hier mit nem Freund am sitzen, wir kapieren es aber beide nicht. Ich hab mal den quelltext soweit gekürzt, dass nichts überflüssiges bei ist, vielleicht hilft das einem es zu erklären. Bin nämlich selber an der Lösung interessiert.
<html><head>
<style type="text/css">b { border-left:solid transparent; border-right:solid transparent; border-bottom:100px solid; border-width:8.66em 5em }
</style>
</head><body><b></b>
</body></html>
Aleksej
-
Hallo Aleksej,
b { border-left:solid transparent; border-right:solid transparent; border-bottom:100px solid; border-width:8.66em 5em }
ganz einfach, das b-Element bekommt zunächst einmal links und rechts
einen transparenten (!) Rand zugeordnet, ausserdem noch unten einen
100px breiten Rand. Da der Browser die Übergänge zwischen den versch.
Rändern diagonal zeichnet, sieht es dann wie ein schwarzes Dreieck
aus, in Wirklichkeit ist es nur der untere schwarze Rand ;-)Viele Grüße,
Stefan-
Hallo zusammen,
b { border-left:solid transparent; border-right:solid transparent; border-bottom:100px solid; border-width:8.66em 5em }
ganz einfach, das b-Element bekommt zunächst einmal links und rechts
einen transparenten (!) Rand zugeordnet, ausserdem noch unten einen
100px breiten Rand. Da der Browser die Übergänge zwischen den versch.
Rändern diagonal zeichnet, sieht es dann wie ein schwarzes Dreieck
aus, in Wirklichkeit ist es nur der untere schwarze Rand ;-)Einfach Genial -> genial einfach (wenn mans weiss wies geht) !!
Hab natürlich auch gleich damit rumexperimentieren müssen und noch folgendes rausgefunden:
Die erste Angabe bei border-width ist die Höhe des 'dreiecks' die zweite Angabe die Breite (dürfte schon klar gewesen sein).Wenn man IE verwenden muß/kann/will *g* dann muß noch ein height:0px rein, sonst stellt er (zumindest bei mir) nix dar.
Und leider stelle IE6.0 >transparente< Ränder in schwarz dar,(naja, wer braucht schon IE wenn er MOZILLA hat *bg*). Also für den border-right und -left die Hintergrundfarbe des div nehmen sonst fällt es auf.
Grüße aus Nürnberg, HarryS
-
-
-
Hallo, jan,
ich habe die Entwicklung einmal veranschaulicht:
http://home.t-online.de/home/dj5nu/fanhost/rahmen.html
(Link ist noch einige Minuten 404 wg. dem T-Online-Spiegelserver.)Dürfte damit verständlich sein... die anderen Beispiele kann ich mit 1.2b nicht nachvollziehen, ich schaue es mir noch einmal genauer an.
Grüße,
Mathias-
Hallo, molily,
ich habe die Entwicklung einmal veranschaulicht:
http://home.t-online.de/home/dj5nu/fanhost/rahmen.html
(Link ist noch einige Minuten 404 wg. dem T-Online-Spiegelserver.)Dürfte damit verständlich sein... die anderen Beispiele kann ich mit 1.2b nicht nachvollziehen, ich schaue es mir noch einmal genauer an.
Vielen Dank.
Das das am ende mehr oder weniger simpel ist.
Das man letztendlich nur den rahmen so fett machen muss, auf die idee bin ich überhaupt nicht gekommen und da in dem beispiel nun die rahmen in em angegeben sind macht das den zahlenwert ja auch relativ klein so das ich das gar nicht als ungewöhnlich wahrgenommen habe.Wenn ich das außergewöhnliche suche, ist das einfache scheinbar meilenweit entfernt.
Nochmal danke.
mfg, jan aus dresden
-