In Vorträgen, die ich in der Vergangenheit gehalten habe, habe ich versucht zu erklären, wie CSS-Dreiecke funktionieren, mit Worten und lächerlichen Handgesten. Das gelingt nie besonders gut.
Also dachte ich, wir versuchen es mal mit einer tatsächlichen In-Code-Animation auf dem Bildschirm. Los geht’s
Siehe den Pen Animation zur Erklärung von CSS-Dreiecken von Chris Coyier (@chriscoyier) auf CodePen
Der Kern des Tricks ist, dass sich die Ränder von Elementen in Winkeln treffen. Wenn also einer transparent ist und der andere nicht, sieht es so aus, als wäre die gesamte Form ein Dreieck. Sie können verschiedene Ränder "ein- und ausschalten" und verschiedene Höhen/Breiten verwenden, um verschiedene Dreiecksformen zu erhalten, die in verschiedene Richtungen zeigen.
Natürlich können Sie mit CSS und nur einem Element allerhand verrückte Dinge machen. Das Dreieck ist immer besonders überzeugend, weil es so praktisch ist.
Vor nicht allzu langer Zeit habe ich etwas sehr Ähnliches auf einem Notizzettel für einen Kollegen skizziert. Ein so einfaches Konzept, aber erstaunlich schwer in Worte zu fassen. Diese Animation wäre hilfreich gewesen
Schöner Beitrag, das solltest du öfter mit Animationen machen, denn das macht es viel klarer! :) Danke!
:) , gut, ich mag es!
Brillante Idee, brillant umgesetzt. Schöne und einfache Schritt-für-Schritt-Animation. Danke dafür, ich werde sie wohl in meinen Universitätskursen zeigen.
Sehr clever. Schöne Demo!
Schön, ich wünschte, das wäre verfügbar gewesen, als ich versuchte, das herauszufinden. Du machst es so leicht verständlich. Jetzt fühle ich mich albern, dass ich mich so lange damit abgemüht habe.
He, einfache und effektive Erklärung. Danke!
Vielen Dank, Chris. Ich habe heute damit gearbeitet und mein Verstand hatte Schwierigkeiten zu verarbeiten, wie es funktionierte. Dein Beitrag erschien in meinem Feed fast *direkt* nachdem ich darüber nachgedacht hatte. Ich habe das Gefühl, du beobachtest mich…
Tolle Erklärung… ich unterrichte HTML und CSS und die Erklärung von CSS-Dreiecken ist eine Herausforderung… ich werde versuchen, diese Animation in Zukunft für eine visuelle Erklärung zu nutzen…
Hier ist ein Pen, den ich über „CSS-Pfeile/Dreieck-Kombinationen“ gemacht habe, in dem man einige der meistverwendeten Dreiecke/Pfeile-Ausrichtungen sehen kann.
Fantastische Animation.
Bravo. Ich habe noch keinen Bedarf dafür gehabt, aber das ist eine großartige Möglichkeit, es zu erklären.
Hallo Chris, danke,
Das ist eine ziemlich Standardmethode, um ein CSS-Dreieck zu erstellen.
Was kniffliger ist, ist die Erstellung eines CSS-STERNES!
Was meint ihr, Leute?
Nimm zwei Boxen, lege sie übereinander und drehe eine der Boxen um 45 Grad. Das sollte einen einfachen Stern ergeben.
Siehe den Pen Einfacher CSS-Stern von begetolo (@begetolo) auf CodePen
Oder schau dir CSS-Tricks an :)
Super Bert! Die Verwendung von Pseudo-Klassen an Elementen hat den Trick gemacht. Danke, Mann. :-)
Versteht mich nicht falsch, das Erstellen von Formen mit reinem CSS ist eine „kreative“ Kunst, aber ich weiß nicht, warum so viele Leute darauf bestehen, diese Art von Techniken auf Produktionsseiten zu verwenden, wenn die SVG-Unterstützung inzwischen so allgegenwärtig ist.
Die Verwendung von SVG, ob inline oder nicht, bedeutet eine zusätzliche Anfrage, entweder für <= IE8 (immer) oder für alle Browser. SVG-Fallback-Techniken fügen eine ganze Menge zusätzlichen Markup und Überlegungen hinzu.
CSS-Dreiecke erfordern keine zusätzlichen Anfragen und funktionieren gleichermaßen auf IE8 und modernen Browsern, wenn sie auf Pseudo-Elementen verwendet werden – also kein zusätzlicher Markup erforderlich.
CSS-Pfeile können auch dynamisch mit relativen Einheiten skaliert werden (setzen Sie die Strichstärke auf ein `em` und lassen Sie die Schriftgröße des übergeordneten Elements die Größe des Pfeils bestimmen).
Ich bin ein großer Fan davon, so viel SVG wie möglich in den von mir erstellten Websites zu verwenden – aber nur, wo es anwendbar ist. SVG für Pfeile ist im Allgemeinen nicht optimal, wenn sie ohne Anfragen oder zusätzlichen Markup generiert werden können.
Ein guter Grund für die Verwendung von CSS ist die Möglichkeit, Teile der „Grafik“ zu animieren.
Stu, ich unterstütze sowohl CSS als auch SVG, aber Ergebnisse nur mit CSS zu erzielen ist erstaunlich und vorzuziehen.
Ich stimme Larry hier vollkommen zu.
Ich stimme zu, Fallbacks sind eine Qual.
Obwohl im Fall von Tooltips, wenn Sie Inline-SVG verwenden (ein `<svg>-Tag` direkt in Ihrem HTML), verursachen Sie keine zusätzliche Anfrage und können Ihren Inhalt in ein `` im SVG legen. Das fällt natürlich zu einer Box ohne Pfeil zurück... kaum das Ende der Welt und immer noch perfekt nutzbar.
Sie können SVG animieren.
Das hier mit CSS zu machen, ist ein Hack. CSS ist nicht dafür konzipiert, Formen zu zeichnen… SVG ist es. Wir sind so daran gewöhnt, CSS zu hacken, um Browserfehler der Vergangenheit auszugleichen, dass ich glaube, wir erkennen oft nicht, wenn wir es tun.
Das Kommentieren in CSS ist normalerweise so schlecht, dass es nicht offensichtlich ist, dass eine komplizierte Reihe von Rändern, Breiten, Höhen und `:before` / `:after`-Elementen verwendet wird, um eine Form zu erstellen. Wenn Sie diese Dinge gründlich kommentieren, sind Sie ein guter Mensch und ich mag Sie :-)
Würdest du einen Pen mit dem erstellen, was du sagst, damit wir alle lernen können?
Hier ist eine Demo einer SVG-Technik mit ``: http://codepen.io/stucox/pen/JzBfe
Das ist brillant! Ich wusste, wie man Dreiecke auswendig kodiert, aber jetzt verstehe ich tatsächlich, warum sie das sind, was sie sind :)
Jetzt kann ich in Zukunft kreativer damit umgehen (Y)
Kennt jemand eine Möglichkeit, ein mit dieser Methode erstelltes Dreieck zu drehen (sagen wir um 10 Grad)?
transform: rotate(10deg);?Hast du das ausprobiert? Ich konnte es nicht zum Laufen bringen…
Hallo Chris, nur aus Neugier und jetzt, wo wir mehr Kontext haben… :) WTF hast du an diesem Punkt des Bildes erklärt? lol
Entschuldigung, falscher Beitrag… oh Junge.
Ja, funktioniert bei mir gut (mit Compass, das die Vendor-Präfixe hinzufügt)
http://codepen.io/jetpacmonkey/pen/lbKJH
Die Animation ist brillant, danke.
Brillante Erklärung! und danke, dass du es klar gemacht hast!
Ja, das war ein großartiger Beitrag. Du solltest das mit den Animationen auf jeden Fall öfter machen.
Das hat mir CSS-Dreiecke vollständig erklärt. Ich weiß es zu schätzen
Firefox scheint unscharfe Randüberschneidungen für durchgezogene Ränder zu machen (das erste Mal, dass ich das sehe). Ich habe auch bestehende Fehlerberichte dazu gefunden. Ich schätze, die Lösung ist im Moment, einen gepunkteten Rand anstelle eines durchgezogenen zu verwenden http://codepen.io/Boogiesox/pen/usmFG. Die einzige Ausnahme ist, dass die Situation in IE 10 umgekehrt ist, aber Sie erhalten ein großes Lob von Opera und Chrome unter Windows.
Welche Windows- und Firefox-Versionen verwendest du?
Ich bin auf Win7 Pro, Firefox 24.0 und beide Dreiecke sehen für mich gut aus, siehe diesen Screenshot
Gut, dass du es erwähnt hast, @Ricardo Zea. Ich verwende die gleichen Spezifikationen, aber ich habe neu gestartet, nachdem ich die Erweiterungen deaktiviert hatte. Sieht so aus, als ob eines meiner Add-ons mit dieser speziellen Situation nicht ganz zusammenpasst. Ich habe keine große Sammlung von Add-ons, also werde ich vielleicht versuchen herauszufinden, welches das Problem verursacht. Schau dir an, was ich gesehen habe, bevor ich die Erweiterungen deaktiviert habe @ http://d.pr/i/QuS5
Unabhängig davon war dies eine wirklich gut gemachte Animation, die einen Trick gut veranschaulicht, den ich ehrlich gesagt noch nie gesehen/verwendet habe. Muss auch Spaß gemacht haben, sie zu erstellen.
In IE10 mit vollem IE10 Browser und Document Mode sieht das obere Dreieck für mich wie ein Rechteck aus, das untere sieht gut aus.
Schau es dir an: http://d.pr/i/9yWy
Es stellt sich heraus, dass es unter Optionen > Erweitert > Browsing > „Hardwarebeschleunigung verwenden, wenn verfügbar“ liegt. Dies scheint bereits in Bugzilla behandelt worden zu sein. Es scheint die Lösung für jegliche „Unschärfe“ oder Verzerrungen in FF zu sein.
Habe gestern einen dieser Tooltips gemacht, aber festgestellt, dass ich Flächenprobleme hatte, weil die transparenten Ränder über den Pfeil hinausgehen.
Habe das umgangen, indem ich stattdessen ein Quadrat verwendet und es um 45 Grad gedreht habe – dadurch ist die Trefferfläche nur noch die sichtbare Fläche
Pen.
Ich verwende diesen Trick schon seit ein paar Jahren, habe aber nie verstanden, WARUM er funktioniert. Danke für die Erleuchtung. (und die Animation!)
Ich liebe die Art und Weise, wie Sie einzigartige Sprachen kombiniert haben, um die langweiligen Stereotypen loszuwerden.
Hallo Chris, nur aus Neugier und jetzt, wo wir mehr Kontext haben… :) WTF hast du an diesem Punkt des Bildes erklärt? lol
Schöne Art, einen sehr netten Trick zu erklären :)
Besonders gefällt mir, wie Sie es am Ende ausblenden lassen, um ein Beispiel dafür zu geben, wofür es verwendet werden kann.
Sehr lehrreich für alle Benutzer.
Nützlich mit The Shapes of CSS.
Alter…..Die Parabel der CSS-Dreiecksform ist das coolste, einfachste Beispiel, das ich je gesehen habe, und außerdem war es eine coole Nutzung von Codepen
wirklich, schöne Art zu lehren….
Wunderschöne Demo!!! Vielen Dank!!!
so einfach, so gut – danke
Ein ähnlicher Trick könnte verwendet werden, um Kreise zu erstellen. Prost.