Frage Wie funktionieren CSS-Dreiecke?


Es gibt viele verschiedene CSS-Formen über CSS Tricks - Formen von CSS und ich bin besonders verwirrt mit einem Dreieck:

CSS Triangle

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


1633
2017-08-16 03:54


Ursprung


Antworten:


CSS Triangles: Eine Tragödie in fünf Akten

Wie sagte Alex, Grenzen gleicher Breite stoßen in 45 Grad Winkeln aneinander:

borders meet at 45 degree angles, content in middle

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

no top border

Dann gibst du ihm eine Breite von 0 ...

no width

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

no height either

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

transparent side borders

Das ergibt ein Dreieck.


2054
2017-08-16 04:11



Die Rahmen verwenden eine abgewinkelte Kante, an der sie sich schneiden (45 ° -Winkel mit gleich breiten Rändern, aber das Ändern der Rahmenbreiten kann den Winkel verdrehen).

Border example

jsFiddle.

Indem Sie bestimmte Ränder ausblenden, können Sie den Dreiecks-Effekt erhalten (wie Sie oben sehen können, indem Sie die verschiedenen Teile in verschiedene Farben bringen). transparent wird oft als Kantenfarbe verwendet, um die Dreiecksform zu erreichen.


484
2017-08-16 03:58



Beginnen Sie mit einem einfachen Quadrat und Rahmen. Jede Grenze erhält eine andere Farbe, damit wir sie 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 dir Dies:

square with four borders

Der obere Rand ist jedoch nicht erforderlich, also setze die Breite auf 0px. Jetzt unser Grenzboden von 200px wird unser Dreieck 200px groß machen.

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

und wir werden bekommen Dies:

bottom half of square with four borders

Um dann die beiden Seitendreiecke zu verbergen, setzen Sie die Rahmenfarbe auf transparent. Da der obere Rand effektiv gelöscht wurde, können wir auch die obere Randfarbe transparent machen.

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

endlich bekommen wir Dies:

triangular bottom border


436
2017-08-17 11:16



Unterschiedlicher Ansatz:

CSS3 Dreiecke mit transformieren drehen

Dreieckige Form ist mit dieser Technik ziemlich einfach zu machen. Für Leute, die es bevorzugen, eine Animation zu sehen, die erklärt, wie diese Technik hier funktioniert, ist es:

gif animation : how to make a triangle with transform rotate

Ansonsten, hier ist eine detaillierte Erklärung in 4 Akten (das ist keine Tragödie), wie man ein gleichschenkliges rechtwinkliges Dreieck mit einem Element macht.

  • Hinweis 1: Für nicht gleichschenklige Dreiecke und Fantasiegegenstände können Sie Schritt 4 sehen.
  • Hinweis 2: In den folgenden Snippets sind die Herstellerpräfixe nicht enthalten. sie sind in der. enthalten Codepen Demos.
  • Hinweis 3: Der HTML-Code für die folgende Erklärung ist immer:  <div class="tr"></div>

SCHRITT 1 : Mache ein div

Einfach, stell das einfach sicher width = 1.41 x height. Sie können jede Technik (siehe hier) einschließlich der Verwendung von Prozentsätzen und Padding-unten, um das Seitenverhältnis beizubehalten und a ansprechendes Dreieck. Im folgenden Bild hat das div eine goldgelbe Umrandung.

In dieses div fügen Sie a ein Pseudoelement und gebe ihm 100% Breite und Höhe des Elternteils. Das Pseudoelement hat im folgenden Bild einen blauen Hintergrund.

Making a CSS triangle with transform roate step 1

An diesem Punkt haben wir das 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 : Lass uns drehen

Erstens, am wichtigsten: Definieren Sie einen Transformationsursprung. Das Standardursprung ist in der Mitte des Pseudo-Elements und wir brauchen es links unten. Indem Sie das hinzufügen CSS zum Pseudoelement:

transform-origin:0 100%; oder transform-origin: left bottom;

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

Creating a triangle with CSS3 step 2

An diesem Punkt haben wir das 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: verstecken Sie es

Um die unerwünschten Teile des Pseudo-Elements (alles, was das div mit dem gelben Rand überläuft) zu verstecken, müssen Sie nur einstellen overflow:hidden; auf dem Behälter. Nachdem Sie den gelben Rand entfernt haben, erhalten Sie ... a DREIECK! :

DEMO

CSS triangle

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

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

  1. Machen Sie sie dünner oder flacher, indem Sie damit spielen skewX().
  2. Bringe sie nach links, rechts oder in eine andere Richtung, indem du mit der Transformationsrichtung und der Drehrichtung spielst.
  3. Machen etwas Reflexion mit 3D-Transformationseigenschaft.
  4. Gib die Dreiecksgrenzen
  5. Setzen Sie ein Bild innerhalb des Dreiecks
  6. Viel mehr ... entfessle die Kräfte von CSS3!

Warum diese Technik verwenden?

  1. Dreieck kann leicht reagieren.
  2. Sie können ein Dreieck mit Grenze.
  3. Sie können die Grenzen des Dreiecks beibehalten. Dies bedeutet, dass Sie den Hover-Status oder das Klick-Ereignis nur dann auslösen können, wenn sich der Cursor befindet innerhalb des Dreiecks. Dies kann in manchen Situationen sehr nützlich sein dieses wobei jedes Dreieck seine Nachbarn nicht überlagern kann, so dass jedes Dreieck seinen eigenen Schwebezustand hat.
  4. Sie können einige machen ausgefallene Effekte wie Reflexionen.
  5. Es wird Ihnen helfen, 2D- und 3D-Transformationseigenschaften zu verstehen.

Warum nicht diese Technik benutzen?

  1. Der Hauptnachteil ist der Browser-KompatibilitätDie 2d-Transformationseigenschaften werden von IE9 + unterstützt. Daher können Sie diese Technik nicht verwenden, wenn Sie IE8 unterstützen möchten. Sehen Kann ich benutzen Für mehr Information. Für einige ausgefallene Effekte mit 3D-Transformationen wie die Reflektion Browser-Unterstützung ist IE10 + (siehe kann ich benutzen Für mehr Information).
  2. Sie brauchen nichts Ansprechendes und ein einfaches Dreieck ist für Sie in Ordnung. Dann sollten Sie sich für die hier erläuterte Randtechnik entscheiden: bessere Browserkompatibilität und leichter zu verstehen dank der tollen Beiträge hier.

214
2017-07-17 16:30



Hier ist ein Animation in JSFiddle Ich habe zur Demonstration erstellt.

Siehe auch Schnipsel unten.

Dies ist ein animiertes GIF aus einem Screencast

Animated Gif of Triangle

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>


156
2017-11-29 11:21



Sagen wir, wir haben folgendes Div:

<div id="triangle" />

Bearbeiten Sie das CSS Schritt für Schritt, damit Sie eine klare Vorstellung davon bekommen, was gerade passiert

SCHRITT 1: JFiddle 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 ein einfaches div. Mit einem sehr einfachen CSS. So kann ein Laie verstehen. Div hat die Abmessungen 150 x 150 Pixel mit der Grenze 50 Pixel. Das Bild ist angehängt:

enter image description here

SCHRITT 2:  JFiddle 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 Randfarbe aller 4 Seiten geändert. Das Bild ist angehängt.

enter image description here

SCHRITT 3  JFiddle 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 angehängt

enter image description here

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 Grenzen bis auf die untere Grenze transparent gemacht. Das Bild ist unten angehängt.

enter image description here

Schritt 5:  JFiddle 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 auf Weiß geändert. Das Bild ist angehängt.

enter image description here

Daher haben wir das Dreieck, das wir brauchten.


39
2018-06-17 06:09



Und jetzt etwas ganz anderes ...

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

&#9650;

Ergebnis:

Sehen: Was sind die HTML-Entitäten für Aufwärts- und Abwärts-Dreiecke?


35
2017-12-01 12:40



Betrachten Sie das untere Dreieck

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

Das ist es, was wir bekommen:

Small triangle output

Warum kam es in dieser Form heraus? Das untere Diagramm erklärt die Dimensionen, beachten Sie, dass 15px für den unteren Rand und 10px für links und rechts verwendet wurde.

Large triangle

Es ist ziemlich einfach, ein rechtwinkliges Dreieck zu machen, indem Sie auch den rechten Rand entfernen.

Right angle triangle


29
2018-03-21 11:20