Wie funktionieren CSS-Dreiecke?

1846

Bei CSS Tricks - Shapes of CSS gibt es viele verschiedene CSS-Formen, und ich bin besonders verwirrt über ein Dreieck:

CSS-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?

Stanislav Shabalin
quelle
59
Sie können: jsfiddle.net/wbZet
mskfisher
55
Wie wäre es mit dem Platz, der nicht da ist? jsfiddle.net/minitech/sZgaa
Ry-
1
@mskfisher Die Größe des unteren Randes in Ihrem gleichseitigen Dreieck sollte nicht decken (sqrt (3) * 60)? Dann ein paar Pixel mehr!
Niloct
1
@Niloct: Ich habe es schnell bei runden Zahlen gesehen. Sie haben Recht, die genaueren gleichseitigen Messungen wären (Seite: 58, unten: 100) oder (Seite: 60, unten: 104).
mskfisher
1
Hier ist ein großartiger CSS-Dreiecksgenerator für alle Richtungen und Größen: apps.eky.hk/css-triangle-generator
Allan Stepps

Antworten:

2239

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:

Ränder treffen sich in 45-Grad-Winkeln, Inhalt in der Mitte

Wenn Sie keinen oberen Rand haben, sieht es so aus:

kein oberer Rand

Dann geben Sie ihm eine Breite von 0 ...

keine Breite

... und eine Höhe von 0 ...

auch keine Höhe

... und schließlich machen Sie die beiden Seitenränder transparent:

transparente Seitenränder

Das ergibt ein Dreieck.

sdleihssirhc
quelle
10
@Jauzsika, können Sie diese Dreiecke in eine Seite hinzufügen , einfach ohne zusätzliche Elemente unter Verwendung :beforeoder :afterPseudo-Klassen.
zzzzBov
stackoverflow.com/questions/5623072/… ist meiner Meinung nach das, worauf sich Mr. BoltClock bezieht.
dreißig Punkte
99
Mit Animationen handeln: jsfiddle.net/pimvdb/mA4Cu/104 . Nur für diejenigen von uns, die noch mehr visuelle Beweise wie mich brauchen ...
pimvdb
Mit verschiedenen left-borderund right-bordernicht gleichschenkligen Dreiecken kann ein Dreieck hergestellt werden. Und wenn viele Dreiecke kombiniert werden ... jsfiddle.net/zRNgz
JiminP
2
Gibt es im Jahr 2018 eine bessere Möglichkeit, mit CSS ein Dreieck zu erstellen, als diesen Hack zu verwenden?
Scribblemacher
518

Die 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).

Randbeispiel

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}
<div></div>

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). transparentwird oft als Kantenfarbe verwendet, um die Dreiecksform zu erreichen.

Alex
quelle
487

Beginnen Sie mit einem einfachen Quadrat und Rändern. Jeder Rand erhält eine andere Farbe, damit wir sie voneinander unterscheiden können:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

was gibt Ihnen dies :

Quadrat mit vier Rändern

Der obere Rand ist jedoch nicht erforderlich. Stellen Sie daher die Breite auf ein 0px. Jetzt macht unser Rand unten 200pxunser Dreieck 200px groß.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

und wir erhalten diese :

untere Hälfte des Quadrats mit vier Rändern

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.

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

Endlich bekommen wir das :

dreieckiger unterer Rand

Mouna Cheikhna
quelle
21
Cool, aber ist das nicht genauso ? :-)
Stanislav Shabalin
5
There's another way to draw .., was sich als der gleiche Weg herausstellt :) Schöne Erklärung
Hammad Khan
16
-1 für die Verwendung von JPEGs mit massiven Artefakten. Aber +1, um ein großartiges Beispiel dafür zu erstellen, wann JPEGs nicht verwendet werden sollen, auf die ich in Zukunft zur Abschreckung verweisen kann. ;)
Henrik Heimbuerger
3
Warum wird hier nicht stattdessen ein GIF verwendet?
Prusswan
4
Sorry @hheimbuerger, ich habe dein Beispiel durcheinander gebracht, indem ich die Bilder repariert habe. Sie müssen in Zukunft auf Revision 2 dieser Antwort verlinken .
Rory O'Kane
263

Anderer 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:

GIF-Animation: Wie man ein Dreieck mit Transformation dreht

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.

  • Anmerkung 1: Für nicht gleichschenklige Dreiecke und ausgefallene Dinge sehen Sie Schritt 4 .
  • Hinweis 2: In den folgenden Snippets sind die Herstellerpräfixe nicht enthalten. Sie sind in den Codepen-Demos enthalten .
  • Anmerkung 3: Der HTML-Code für die folgende Erklärung lautet immer: <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.

Erstellen eines CSS-Dreiecks mit Transform Roate Schritt 1

Zu diesem Zeitpunkt haben wir dieses CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

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%; oder transform-origin: left bottom;

Jetzt können wir das Pseudoelement mit um 45 Grad im Uhrzeigersinn drehen transform : rotate(45deg);

Erstellen eines Dreiecks mit CSS3 Schritt 2

Zu diesem Zeitpunkt haben wir dieses CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

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-Dreieck

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

SCHRITT 4: Gehen Sie weiter ...

Wie in der Demo gezeigt , können Sie die Dreiecke anpassen:

  1. Machen Sie sie dünner oder flacher, indem Sie damit spielen skewX().
  2. Lassen Sie sie nach links, rechts oder in eine andere Richtung zeigen, indem Sie mit der Transformations- und Drehrichtung spielen.
  3. Machen Sie eine Reflexion mit der 3D-Transformationseigenschaft.
  4. Geben Sie die Dreiecksränder an
  5. Fügen Sie ein Bild in das Dreieck ein
  6. Viel mehr ... Entfesseln Sie die Möglichkeiten von CSS3 !

Warum diese Technik anwenden?

  1. Dreieck kann leicht reagieren.
  2. Sie können ein Dreieck mit Rand erstellen .
  3. Sie können die Grenzen des Dreiecks beibehalten. Dies bedeutet, dass Sie den Schwebezustand oder das Klickereignis nur auslösen können, wenn sich der Cursor innerhalb des Dreiecks befindet . Dies kann in Situationen wie dieser sehr praktisch sein, in denen jedes Dreieck seine Nachbarn nicht überlagern kann, sodass jedes Dreieck seinen eigenen Schwebezustand hat.
  4. Sie können einige ausgefallene Effekte wie Reflexionen erzielen .
  5. Es wird Ihnen helfen, die 2D- und 3D-Transformationseigenschaften zu verstehen.

Warum nicht diese Technik anwenden?

  1. Der Hauptnachteil ist die Browserkompatibilität . Die 2D-Transformationseigenschaften werden von IE9 + unterstützt. Daher können Sie diese Technik nicht verwenden, wenn Sie IE8 unterstützen möchten. Weitere Informationen finden Sie unter CanIuse . Für einige ausgefallene Effekte mit 3D-Transformationen wie die Unterstützung des Reflection- Browsers ist IE10 + (siehe canIuse für weitere Informationen).
  2. Sie brauchen nichts ansprechendes und ein einfaches Dreieck ist in Ordnung für Sie, dann sollten Sie sich für die hier erläuterte Randtechnik entscheiden: bessere Browserkompatibilität und leichter zu verstehen dank der erstaunlichen Beiträge hier.
Web-Tiki
quelle
16
Es ist wahrscheinlich erwähnenswert, dass 1,41 eine Annäherung an √2 und die Länge der Hypotenuse des von Ihnen erstellten Dreiecks ist, weshalb Sie (zumindest) diese Breite benötigen.
KRyan
Ich wollte die Antwort einfach halten, aber Sie haben Recht, es sollte @KRyan
Web-Tiki
Bei dem Versuch, dies zu verwenden, skewXwäre es tatsächlich nützlich zu erwähnen, wie die verschiedenen Breiten zur Verwendung mit abgeleitet wurden.
KRyan
1
Diese Methode funktioniert besser, wenn Sie einen festen Rand von 1 Pixel für das Dreieck benötigen.
Roman Losev
Dies ist für den Fall, dass Sie Rahmen für Dreieck erstellen möchten. Ich habe mich an den Rahmen gehalten, als ich dieses Anmerkungsfeld erstellen möchte. AnnotationBox
vanduc1102
182

Hier ist eine Animation in JSFiddle, die ich zur Demonstration erstellt habe.

Siehe auch Ausschnitt unten.

Dies ist ein animiertes GIF aus einem Screencast

Animiertes Gif des Dreiecks


Zufällige Version


Alles auf einmal Version

Yunzen
quelle
49

Nehmen wir an, wir haben die folgende Div:

<div id="triangle" />

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:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

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:

Geben Sie hier die Bildbeschreibung ein

SCHRITT 2: JSfiddle Link:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Jetzt habe ich nur die Rahmenfarbe aller 4 Seiten geändert. Das Bild ist beigefügt.

Geben Sie hier die Bildbeschreibung ein

SCHRITT : 3 JSfiddle Link:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Jetzt habe ich nur die Höhe und Breite von div von 150 Pixel auf Null geändert. Das Bild ist beigefügt

Geben Sie hier die Bildbeschreibung ein

SCHRITT 4: JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Jetzt habe ich alle Ränder bis auf den unteren Rand transparent gemacht. Das Bild ist unten angehängt.

Geben Sie hier die Bildbeschreibung ein

SCHRITT 5: JSfiddle Link:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Jetzt habe ich nur die Hintergrundfarbe in Weiß geändert. Das Bild ist beigefügt.

Geben Sie hier die Bildbeschreibung ein

Daher haben wir das Dreieck bekommen, das wir brauchten.

Rai Ammad Khan
quelle
3
Warum haben Sie für den ersten Schritt ein Netherportal verwendet?
LuizLoyola
38

Und jetzt etwas ganz anderes ...

Anstatt CSS-Tricks zu verwenden, vergessen Sie nicht Lösungen, die so einfach wie HTML-Entitäten sind:

&#9650;

Ergebnis:

Siehe: Was sind die HTML-Entitäten für Auf- und Ab-Dreiecke?

Gemeinschaft
quelle
2
Ich denke nicht, dass "geschlagen" hier ein angemessenes Wort ist. Die Lösung basiert auf den Schriftmetriken, daher ist die genaue Positionierung eher zweifelhaft, ganz zu schweigen davon, dass Sie keine Kontrolle über die Form haben.
user776686
32

Betrachten Sie das folgende Dreieck

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

Dies ist, was uns gegeben wird:

Kleine Dreiecksausgabe

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.

Großes Dreieck

Es ist ziemlich einfach, ein rechtwinkliges Dreieck zu erstellen, indem auch der rechte Rand entfernt wird.

Rechtwinkliges Dreieck

Daniel Imms
quelle
29

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).

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

PseudoNinja
quelle
1
Wie ist das nicht Cross-Browser? Dreiecke sollten auf IE6 zurück funktionieren.
Chriscauley
4
Die Verwendung von: before und: after wird nicht zu 100% unterstützt.
PseudoNinja
2
Pseudo-Elemente werden nicht unterstützt <IE8.
alex
19

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:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Dann haben wir im nächsten Schritt keine Breite oder Höhe, so etwas:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Und jetzt machen wir den linken und rechten Rand unsichtbar, um unser gewünschtes Dreieck wie folgt zu machen:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="triangle"></div>

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:

Geben Sie hier die Bildbeschreibung ein

Alireza
quelle
18

Anderer Ansatz. Mit linearem Gradienten (für IE nur IE 10+). Sie können einen beliebigen Winkel verwenden:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

Hier ist jsfiddle

lima_fil
quelle
Dies ist eine schöne Lösung, aber es sollte beachtet werden, dass es nur IE 10+ ist.
Eric Hu
13

CSS clip-path

Ich habe das Gefühl, dass diese Frage übersehen wurde. clip-path

clip-path in einer Nussschale

Das clip-pathAusschneiden mit der Eigenschaft ähnelt dem Ausschneiden einer Form (wie eines Kreises oder eines Fünfecks) aus einem rechteckigen Blatt Papier. Die Eigenschaft gehört zur Spezifikation „ CSS Masking Module Level 1 “. In der Spezifikation heißt es: „Die CSS-Maskierung bietet zwei Möglichkeiten, um Teile visueller Elemente teilweise oder vollständig auszublenden: Maskieren und Ausschneiden.“


clip-pathverwendet 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

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}
<div></div>


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-pathdie Ihnen helfen , Ihre eigenen Ressourcen besser zu verstehen und zu erstellen.

Stewartside
quelle
11

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 :afterPseudoklasse und positionieren sie direkt unter dem anderen:

2 Dreiecke

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Schritt 2

Jetzt müssen wir nur noch die vorherrschende Rahmenfarbe des zweiten Dreiecks auf dieselbe Hintergrundfarbe setzen:

Geben Sie hier die Bildbeschreibung ein

Spielen Sie mit allen Pfeilen:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Tom Sarduy
quelle
9

SASS (SCSS) Dreiecksmischung

Ich habe dies geschrieben, um es einfacher (und trockener) zu machen, automatisch ein CSS-Dreieck zu generieren:

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

Anwendungsfallbeispiel:

span {
  @include triangle(bottom, red, 10px);
}

Spielplatzseite


Wichtiger Hinweis:
Wenn das Dreieck in einigen Browsern pixelig erscheint , versuchen Sie eine der hier beschriebenen Methoden .

vsync
quelle
8

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-gradientMethode näher erläutern (wie in der Antwort von @lima_fil begonnen ).

Die Verwendung eines Gradwerts wie 45°zwingt uns, ein bestimmtes Verhältnis von height/widtheinzuhalten, um das gewünschte Dreieck zu erhalten, und dies reagiert nicht:

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.

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.

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).

CSS-Dreieck mit Farbverlauf

Wir haben unsere zwei Farbverläufe g1und g2die blaue Linie ist die Breite des div wund jeder Farbverlauf hat 50% davon ( w/2) und jede Seite des Dreiecks sollte gleich sein w. Die grüne Linie ist die Höhe beider Gradienten hgund 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:

Eine andere Möglichkeit besteht darin, die Höhe von div zu steuern und die Syntax des Verlaufs einfach zu halten:

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).

Aber was ist, wenn wir für jede Seite einen Wert definieren wollen? Wir müssen einfach noch einmal rechnen!

CSS-Dreieck mit Farbverlauf

Definieren wir dann hg1und hg2als die Höhe unseres Verlaufs (beide sind gleich der roten Linie) wg1und wg2als die Breite unseres Verlaufs ( wg1 + wg2 = a). Ich werde die Berechnung nicht detaillieren, aber am Ende haben wir:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

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:

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:

Und natürlich sollten wir die SVG-Lösung berücksichtigen, die in bestimmten Situationen besser geeignet sein kann:

Temani Afif
quelle
4

Hier ist eine andere Geige:

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

Doml The-Bread
quelle
4

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:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

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:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}
HelloWorldNoMore
quelle
2

Wenn Sie spielen , um möchten border-size, widthund heightsehen , wie diejenigen , verschiedene Formen erstellen können, versuchen Sie dies:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}
<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

Danziger
quelle
1

Versuche dies:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class="triangle"></div>

satish mallick
quelle
0

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 .

  1. Verwenden von borders
  2. Verwenden von linear-gradient
  3. Verwenden von conic-gradient
  4. Verwenden von transformundoverflow
  5. Verwenden von clip-path

Ich denke, dass hier alle außer Methode 3 mit dem behandelt wurden conic-gradient, also werde ich es hier teilen:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }
<div class="triangle"></div>

Erstellen Sie CSS-Dreiecke mit Conic Gradient

coding-dude.com
quelle