rechtwinkliges - Wie funktionieren CSS-Dreiecke?




css rechtwinkliges dreieck (12)

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

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

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

Dann gibst du ihm eine Breite von 0 ...

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

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

Das ergibt ein Dreieck.

Es gibt viele verschiedene CSS-Formen bei CSS Tricks - Formen von CSS und ich bin besonders verwirrt mit einem 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?


SASS (SCSS) Dreieck mischen

Ich schrieb dies, um es einfacher (und DRY) zu machen, ein CSS-Dreieck automatisch 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;
}

Anwendungsbeispiel:

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

Spielplatz Seite

Wichtige Notiz:
Wenn das Dreieck in einigen Browsern verpixelt erscheint, versuchen Sie eine der here beschriebenen Methoden.


Andere haben das bereits gut erklärt. Lass mich dir eine Animation geben, die das schnell erklärt: http://codepen.io/chriscoyier/pen/lotjh

Hier ist ein Code, mit dem Sie mit den Konzepten spielen und 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. Stellen Sie Höhe und Breite auf Null ein. Dann entfernen Sie den oberen Rand und machen Sie links und rechts transparent, oder schauen 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;
}

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

Das gibt dir this :

this

Da der obere Rahmen nicht benötigt wird, legen Sie die Breite auf 0px . Jetzt wird unser Dreieck mit 200px 200px groß.

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

und wir werden das bekommen:

this

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

this


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

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.


Dies ist eine alte Frage, aber ich denke, es lohnt sich, zu teilen, wie man mit dieser Dreieckstechnik einen Pfeil erstellt.

Schritt 1:

Lassen Sie uns zwei Dreiecke erstellen, für die zweite werden wir die Pseudo-Klasse :after Pseudo-Klasse verwenden und sie direkt unter der anderen platzieren:

.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 Randfarbe des zweiten Dreiecks auf die gleiche Hintergrundfarbe einstellen:

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

Geige mit allen Pfeilen:
http://jsfiddle.net/tomsarduy/r0zksgeu/


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

Siehe auch Schnipsel 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>


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/


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

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

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 angehängt

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

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

Daher haben wir das Dreieck, das wir brauchten.


Um noch einen Schritt weiter zu gehen, habe ich auf der Grundlage von css Pfeile zu meinen hinteren und nächsten Tasten hinzugefügt (ja, ich weiß, dass es nicht zu 100% browserübergreifend ist, aber dennoch glatt).

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


Unterschiedlicher Ansatz. Mit linearem Gradienten (für IE, nur IE 10+). Sie können jeden 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


Unterschiedlicher Ansatz:

CSS3-Dreiecke mit transformieren rotieren

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:

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 den Codepen-Demos enthalten .
  • Hinweis 3: Der HTML-Code für die folgende Erklärung lautet immer: <div class="tr"></div>

Schritt 1: Machen Sie ein div

Einfach, stellen Sie sicher, dass width = 1.41 x height . Sie können eine beliebige Technik ( siehe hier ) verwenden, einschließlich der Verwendung von Prozentsätzen und Füll-Unterseite, um das Seitenverhältnis beizubehalten und ein reaktionsfähiges Dreieck zu bilden . Im folgenden Bild hat das div eine goldgelbe Umrandung.

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.

An dieser Stelle 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: Lass uns drehen

Zuerst, am wichtigsten: Definieren Sie einen Transformationsursprung . Der Standardursprung befindet sich in der Mitte des Pseudoelements und wir benötigen es unten links. Durch Hinzufügen dieses CSS zum Pseudo-Element:

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

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

An dieser Stelle 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: verstecken Sie es

Um die unerwünschten Teile des Pseudo-Elements (alles, was das div mit dem gelben Rand overflow:hidden; müssen Sie nur den overflow:hidden; einstellen overflow:hidden; auf dem Behälter. Nach dem Entfernen der gelben Grenze, 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: Geh weiter ...

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

  1. Machen Sie sie dünner oder flacher, indem Sie mit skewX() .
  2. Bringe sie nach links, rechts oder in eine andere Richtung, indem du mit der Transformationsrichtung und der Drehrichtung spielst.
  3. Machen Sie eine Reflexion mit der 3D-Transformationseigenschaft.
  4. Gib die Dreiecksgrenzen an
  5. Legen Sie ein Bild in das Dreieck
  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 Rahmen erstellen .
  3. Sie können die Grenzen des Dreiecks beibehalten. Dies bedeutet, dass Sie den Hover-Status oder das Click-Ereignis nur auslösen können, wenn sich der Cursor innerhalb des Dreiecks befindet . Dies kann in Situationen wie diesem, in denen jedes Dreieck seine Nachbarn nicht überlagern kann, sehr nützlich sein, so dass jedes Dreieck seinen eigenen Schwebezustand hat.
  4. Sie können einige ausgefallene Effekte wie Reflexionen machen .
  5. Es wird Ihnen helfen, 2D- und 3D-Transformationseigenschaften zu verstehen.

Warum nicht diese Technik benutzen?

  1. Der Hauptnachteil ist die Browserkompatibilität , die 2d-Transformationseigenschaften werden von IE9 + unterstützt und daher können Sie diese Technik nicht verwenden, wenn Sie IE8 unterstützen möchten. Weitere CanIuse Sie unter CanIuse . Für einige ausgefallene Effekte mit 3D-Transformationen wie die Reflection- Browser-Unterstützung ist IE10 + (siehe canIuse für weitere Informationen).
  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.






css-shapes