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

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

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.

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 :

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 :

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 :

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:

• Link zur ANIMATION: So erstellen Sie ein CSS3- Dreieck .
• Und DEMO: CSS3- Dreiecke mit Transformation drehen.

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.

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

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:

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

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

Siehe auch Ausschnitt unten.

Dies ist ein animiertes GIF aus einem Screencast

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Zufällige Version

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Alles auf einmal Version

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

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:

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.

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

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.

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.

Daher haben wir das Dreieck bekommen, das wir brauchten.

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?

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:

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.

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>

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:

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

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

• Auszug aus dem Smashing Magazine

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.

• Clippy - Ein clip-pathGenerator
• Die W3C-Kandidatenempfehlungsdatei
• MDN- clip-pathDokumentation
• clip-path Browser-Unterstützung

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:

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

.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 #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

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

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 .

^{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:

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

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.

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

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.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

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

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

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

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

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

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

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

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:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

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:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

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

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

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/

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;
}

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>

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>

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>