Bei CSS Tricks - Shapes of CSS gibt es viele verschiedene CSS-Formen, und ich bin besonders verwirrt über ein Dreieck:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
Wie und warum funktioniert es?
css
geometry
polygon
css-shapes
Stanislav Shabalin
quelle
quelle
Antworten:
CSS-Dreiecke: Eine Tragödie in fünf Akten
Wie Alex sagte , stoßen gleich breite Ränder in einem Winkel von 45 Grad aneinander:
Wenn Sie keinen oberen Rand haben, sieht es so aus:
Dann geben Sie ihm eine Breite von 0 ...
... und eine Höhe von 0 ...
... und schließlich machen Sie die beiden Seitenränder transparent:
Das ergibt ein Dreieck.
quelle
:before
oder:after
Pseudo-Klassen.left-border
undright-border
nicht gleichschenkligen Dreiecken kann ein Dreieck hergestellt werden. Und wenn viele Dreiecke kombiniert werden ... jsfiddle.net/zRNgzDie Ränder verwenden eine abgewinkelte Kante, an der sie sich schneiden (45 ° -Winkel bei Rändern gleicher Breite, aber das Ändern der Randbreiten kann den Winkel verzerren).
Schauen Sie sich die jsFiddle an .
Durch Ausblenden bestimmter Ränder können Sie den Dreieckeffekt erzielen (wie Sie oben sehen können, indem Sie die verschiedenen Bereiche in verschiedenen Farben gestalten).
transparent
wird oft als Kantenfarbe verwendet, um die Dreiecksform zu erreichen.quelle
Beginnen Sie mit einem einfachen Quadrat und Rändern. Jeder Rand erhält eine andere Farbe, damit wir sie voneinander unterscheiden können:
was gibt Ihnen dies :
Der obere Rand ist jedoch nicht erforderlich. Stellen Sie daher die Breite auf ein
0px
. Jetzt macht unser Rand unten200px
unser Dreieck 200px groß.und wir erhalten diese :
Um die beiden seitlichen Dreiecke auszublenden, setzen Sie die Rahmenfarbe auf transparent. Da der obere Rand effektiv gelöscht wurde, können wir auch die obere Randfarbe auf transparent setzen.
Endlich bekommen wir das :
quelle
There's another way to draw ..
, was sich als der gleiche Weg herausstellt :) Schöne ErklärungAnderer Ansatz:
CSS3-Dreiecke mit Transformation drehen
Eine dreieckige Form ist mit dieser Technik ziemlich einfach herzustellen. Für Leute, die es vorziehen, eine Animation zu sehen, die erklärt, wie diese Technik hier funktioniert, ist dies:
Ansonsten finden Sie hier in 4 Akten (dies ist keine Tragödie) eine ausführliche Erklärung, wie ein gleichschenkliges rechtwinkliges Dreieck mit einem Element hergestellt wird.
<div class="tr"></div>
SCHRITT 1: Machen Sie eine Div
Einfach, stellen Sie einfach sicher, dass
width = 1.41 x height
. Sie können jede Technik verwenden ( siehe hier ), einschließlich der Verwendung von Prozentsätzen und Polsterung, um das Seitenverhältnis beizubehalten und ein ansprechendes Dreieck zu erstellen . Im folgenden Bild hat der Div einen goldgelben Rand.Fügen Sie in dieses div ein Pseudoelement ein und geben Sie ihm 100% Breite und Höhe des übergeordneten Elements . Das Pseudoelement hat im folgenden Bild einen blauen Hintergrund.
Zu diesem Zeitpunkt haben wir dieses CSS :
SCHRITT 2: Lassen Sie uns drehen
Zunächst das Wichtigste: Definieren Sie einen Transformationsursprung . Der Standardursprung befindet sich in der Mitte des Pseudoelements und wird unten links benötigt. Durch Hinzufügen dieses CSS zum Pseudoelement:
transform-origin:0 100%;
odertransform-origin: left bottom;
Jetzt können wir das Pseudoelement mit um 45 Grad im Uhrzeigersinn drehen
transform : rotate(45deg);
Zu diesem Zeitpunkt haben wir dieses CSS :
SCHRITT 3: Verstecke es
Um die unerwünschten Teile des Pseudoelements auszublenden (alles, was das div mit dem gelben Rand überläuft), müssen Sie nur
overflow:hidden;
den Container festlegen . Nachdem Sie den gelben Rand entfernt haben, erhalten Sie ... ein DREIECK ! ::DEMO
CSS:
SCHRITT 4: Gehen Sie weiter ...
Wie in der Demo gezeigt , können Sie die Dreiecke anpassen:
skewX()
.Warum diese Technik anwenden?
Warum nicht diese Technik anwenden?
quelle
skewX
wäre es tatsächlich nützlich zu erwähnen, wie die verschiedenen Breiten zur Verwendung mit abgeleitet wurden.Hier ist eine Animation in JSFiddle, die ich zur Demonstration erstellt habe.
Siehe auch Ausschnitt unten.
Dies ist ein animiertes GIF aus einem Screencast
Code-Snippet anzeigen
Zufällige Version
Code-Snippet anzeigen
Alles auf einmal Version
Code-Snippet anzeigen
quelle
Nehmen wir an, wir haben die folgende Div:
Bearbeiten Sie nun das CSS Schritt für Schritt, damit Sie eine klare Vorstellung davon bekommen, was um Sie herum passiert
SCHRITT 1: JSfiddle Link:
Dies ist eine einfache div. Mit einem sehr einfachen CSS. So kann ein Laie verstehen. Div hat Abmessungen von 150 x 150 Pixel mit einem Rand von 50 Pixel. Das Bild ist beigefügt:
SCHRITT 2: JSfiddle Link:
Jetzt habe ich nur die Rahmenfarbe aller 4 Seiten geändert. Das Bild ist beigefügt.
SCHRITT : 3 JSfiddle Link:
Jetzt habe ich nur die Höhe und Breite von div von 150 Pixel auf Null geändert. Das Bild ist beigefügt
SCHRITT 4: JSfiddle:
Jetzt habe ich alle Ränder bis auf den unteren Rand transparent gemacht. Das Bild ist unten angehängt.
SCHRITT 5: JSfiddle Link:
Jetzt habe ich nur die Hintergrundfarbe in Weiß geändert. Das Bild ist beigefügt.
Daher haben wir das Dreieck bekommen, das wir brauchten.
quelle
Und jetzt etwas ganz anderes ...
Anstatt CSS-Tricks zu verwenden, vergessen Sie nicht Lösungen, die so einfach wie HTML-Entitäten sind:
Ergebnis:
▲
Siehe: Was sind die HTML-Entitäten für Auf- und Ab-Dreiecke?
quelle
Betrachten Sie das folgende Dreieck
Dies ist, was uns gegeben wird:
Warum kam es in dieser Form heraus? Das folgende Diagramm erläutert die Abmessungen. Beachten Sie, dass 15 Pixel für den unteren Rand und 10 Pixel für links und rechts verwendet wurden.
Es ist ziemlich einfach, ein rechtwinkliges Dreieck zu erstellen, indem auch der rechte Rand entfernt wird.
quelle
Um noch einen Schritt weiter zu gehen, habe ich mit CSS auf dieser Grundlage Pfeile zu meinem Rücken und den nächsten Schaltflächen hinzugefügt (ja, ich weiß, dass es nicht 100% browserübergreifend ist, aber trotzdem schlau).
quelle
OK, dieses Dreieck wird erstellt, weil die Ränder der Elemente in HTML und CSS zusammenarbeiten.
Da wir normalerweise 1- oder 2-Pixel-Ränder verwenden, bemerken wir nie, dass Ränder einen Winkel von 45 ° zueinander mit derselben Breite bilden. Wenn sich die Breite ändert, ändert sich auch der Winkelgrad. Führen Sie den unten erstellten CSS-Code aus:
Dann haben wir im nächsten Schritt keine Breite oder Höhe, so etwas:
Und jetzt machen wir den linken und rechten Rand unsichtbar, um unser gewünschtes Dreieck wie folgt zu machen:
Wenn Sie nicht bereit sind, das Snippet auszuführen, um die Schritte anzuzeigen, habe ich eine Bildsequenz erstellt, um alle Schritte in einem Bild anzuzeigen:
quelle
Anderer Ansatz. Mit linearem Gradienten (für IE nur IE 10+). Sie können einen beliebigen Winkel verwenden:
Hier ist jsfiddle
quelle
CSS
clip-path
Ich habe das Gefühl, dass diese Frage übersehen wurde.
clip-path
clip-path
verwendet das Element selbst anstelle seiner Ränder, um die in den Parametern angegebene Form zu schneiden. Es verwendet ein supereinfaches prozentuales Koordinatensystem, das die Bearbeitung sehr einfach macht und bedeutet, dass Sie es in wenigen Minuten aufnehmen und seltsame und wundervolle Formen erstellen können.Beispiel für eine Dreiecksform
Nachteil
Es hat im Moment einen großen Nachteil, einer davon ist der große Mangel an Unterstützung, der nur wirklich in
-webkit-
Browsern behandelt wird und keine Unterstützung im IE hat und in FireFox nur sehr teilweise ist.Ressourcen
Hier finden Sie einige nützliche Ressourcen und Materialien,
clip-path
die Ihnen helfen , Ihre eigenen Ressourcen besser zu verstehen und zu erstellen.clip-path
Generatorclip-path
Dokumentationclip-path
Browser-Unterstützungquelle
Dies ist eine alte Frage, aber ich denke, es lohnt sich zu teilen, wie man mit dieser Dreieckstechnik einen Pfeil erstellt.
Schritt 1:
Erstellen wir zwei Dreiecke. Für das zweite verwenden wir die
:after
Pseudoklasse und positionieren sie direkt unter dem anderen:Schritt 2
Jetzt müssen wir nur noch die vorherrschende Rahmenfarbe des zweiten Dreiecks auf dieselbe Hintergrundfarbe setzen:
Code-Snippet anzeigen
Spielen Sie mit allen Pfeilen:
http://jsfiddle.net/tomsarduy/r0zksgeu/
quelle
SASS (SCSS) Dreiecksmischung
Ich habe dies geschrieben, um es einfacher (und trockener) zu machen, automatisch ein CSS-Dreieck zu generieren:
Anwendungsfallbeispiel:
Spielplatzseite
Wichtiger Hinweis:
Wenn das Dreieck in einigen Browsern pixelig erscheint , versuchen Sie eine der hier beschriebenen Methoden .
quelle
Wenn Sie dem Dreieck einen Rand zuweisen möchten, lesen Sie Folgendes : Erstellen Sie ein Dreieck mit CSS?
Fast alle Antworten konzentrieren sich auf das Dreieck, das mit Rahmen erstellt wurde, daher werde ich die
linear-gradient
Methode näher erläutern (wie in der Antwort von @lima_fil begonnen ).Die Verwendung eines Gradwerts wie
45°
zwingt uns, ein bestimmtes Verhältnis vonheight/width
einzuhalten, um das gewünschte Dreieck zu erhalten, und dies reagiert nicht:Code-Snippet anzeigen
Anstatt dies zu tun, sollten wir vordefinierte Richtungswerte berücksichtigen wie
to bottom
:to top
usw. In diesem Fall haben wir jede Art von Dreiecksform erhalten kann , während es in Reaktion zu halten.1) Rechteckdreieck
Zu erhalten , wie zum Dreieck benötigen wir eine linearen Gradienten und eine diagonale Richtung wie
to bottom right
,to top left
,to bottom left
, usw.Code-Snippet anzeigen
2) gleichschenkliges Dreieck
Für diesen benötigen wir 2 lineare Gradienten wie oben und jeder nimmt die Hälfte der Breite (oder der Höhe) ein. Es ist, als würden wir ein Spiegelbild des ersten Dreiecks erstellen.
Code-Snippet anzeigen
3) gleichseitiges Dreieck
Dieser ist etwas schwierig zu handhaben, da wir ein Verhältnis zwischen Höhe und Breite des Verlaufs beibehalten müssen. Wir werden das gleiche Dreieck wie oben haben, aber wir werden die Berechnung komplexer machen, um das gleichschenklige Dreieck in ein gleichseitiges Dreieck umzuwandeln.
Um es einfacher zu machen, werden wir berücksichtigen, dass die Breite unseres Div bekannt ist und die Höhe groß genug ist, um unser Dreieck nach innen zeichnen zu können (
height >= width
).Wir haben unsere zwei Farbverläufe
g1
undg2
die blaue Linie ist die Breite desdiv
w
und jeder Farbverlauf hat 50% davon (w/2
) und jede Seite des Dreiecks sollte gleich seinw
. Die grüne Linie ist die Höhe beider Gradientenhg
und wir können die folgende Formel leicht erhalten:(w/2)² + hg² = w²
--->hg = (sqrt(3)/2) * w
--->hg = 0.866 * w
Wir können uns darauf verlassen
calc()
, dass wir unsere Berechnungen durchführen und das erforderliche Ergebnis erzielen:Code-Snippet anzeigen
Eine andere Möglichkeit besteht darin, die Höhe von div zu steuern und die Syntax des Verlaufs einfach zu halten:
Code-Snippet anzeigen
4) Zufälliges Dreieck
Um ein zufälliges Dreieck zu erhalten, ist es einfach, da wir einfach die Bedingung von 50% von jedem entfernen müssen, ABER wir sollten zwei Bedingungen beibehalten (beide sollten die gleiche Höhe haben und die Summe beider Breiten sollte 100% sein).
Code-Snippet anzeigen
Aber was ist, wenn wir für jede Seite einen Wert definieren wollen? Wir müssen einfach noch einmal rechnen!
Definieren wir dann
hg1
undhg2
als die Höhe unseres Verlaufs (beide sind gleich der roten Linie)wg1
undwg2
als die Breite unseres Verlaufs (wg1 + wg2 = a
). Ich werde die Berechnung nicht detaillieren, aber am Ende haben wir:Jetzt haben wir die Grenze von CSS erreicht, da
calc()
wir dies selbst dann nicht implementieren können. Daher müssen wir das Endergebnis einfach manuell erfassen und als feste Größe verwenden:Code-Snippet anzeigen
Bonus
Wir sollten nicht vergessen, dass wir auch Rotation und / oder Schrägstellung anwenden können und mehr Optionen haben, um mehr Dreiecke zu erhalten:
Code-Snippet anzeigen
Und natürlich sollten wir die SVG-Lösung berücksichtigen, die in bestimmten Situationen besser geeignet sein kann:
Code-Snippet anzeigen
quelle
Hier ist eine andere Geige:
https://jsfiddle.net/qdhvdb17/
quelle
Andere haben dies bereits gut erklärt. Lassen Sie mich Ihnen eine Animation geben, die dies schnell erklärt: http://codepen.io/chriscoyier/pen/lotjh
Hier ist ein Code, mit dem Sie spielen und die Konzepte lernen können.
HTML:
CSS:
Spielen Sie damit und sehen Sie, was passiert. Setzen Sie Höhe und Breite auf Null. Entfernen Sie dann den oberen Rand und machen Sie links und rechts transparent, oder sehen Sie sich einfach den folgenden Code an, um ein CSS-Dreieck zu erstellen:
quelle
Wenn Sie spielen , um möchten
border-size
,width
undheight
sehen , wie diejenigen , verschiedene Formen erstellen können, versuchen Sie dies:quelle
Versuche dies:-
quelle
Ich weiß, dass dies eine alte ist, aber ich möchte dieser Diskussion hinzufügen, dass es mindestens 5 verschiedene Methoden gibt, um ein Dreieck nur mit HTML und CSS zu erstellen .
borders
linear-gradient
conic-gradient
transform
undoverflow
clip-path
Ich denke, dass hier alle außer Methode 3 mit dem behandelt wurden
conic-gradient
, also werde ich es hier teilen:quelle