Pytanie Jak działają trójkąty CSS?


Istnieje wiele różnych kształtów CSS na poziomie Sztuczki CSS - Kształty CSS i jestem szczególnie zaintrygowany trójkątem:

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>

Jak i dlaczego to działa?


1637
2017-08-16 03:54


pochodzenie


Świetne pytanie! Byłoby jeszcze bardziej imponujące, gdyby można było narysować trójkąt równoboczny;) - Abel
Możesz: jsfiddle.net/wbZet - mskfisher
A co z kwadratem, którego tam nie ma? jsfiddle.net/minitech/sZgaa - Ry-♦
To proste, zmień "czerwony" na "niebieski", a trójkąt będzie niebieski :-) - Ofer Zelig
Mój kolega ma stronę z wyjaśnieniem i aplikacją wykorzystującą ją do budowania obiektów 3D: uselesspickles.com/triangles - Juan Mendes


Odpowiedzi:


Trójkąty CSS: tragedia w pięciu aktach

Tak jak powiedział alex, granice o jednakowej szerokości względem siebie pod kątem 45 stopni:

borders meet at 45 degree angles, content in middle

Kiedy nie masz górnej granicy, wygląda to tak:

no top border

Następnie dajesz mu szerokość 0 ...

no width

... i wysokość 0 ...

no height either

... i wreszcie, sprawiamy, że dwie boczne krawędzie są przezroczyste:

transparent side borders

W rezultacie powstaje trójkąt.


2057
2017-08-16 04:11



@Jauzsika, możesz dodać te trójkąty do strony bez dodawania dodatkowych elementów po prostu przy użyciu :before lub :after pseudo klasy. - zzzzBov
@zzzzBov: pseudoelementy. - BoltClock♦
stackoverflow.com/questions/5623072/... jest to, o czym mówi pan BoltClock. - thirtydot
Ładne ilustracje. Teraz możesz to zrobić w CSS? - ikdc
Działaj z animacjami: jsfiddle.net/pimvdb/mA4Cu/104. Właśnie dla tych z nas, którzy potrzebują jeszcze więcej dowodów wizualnych takich jak ja ... - pimvdb


Granice używają nachylonej krawędzi, gdzie się przecinają (kąt 45 ° z równą szerokością krawędzi, ale zmiana szerokości krawędzi może przekrzywić kąt).

Border example

jsFiddle.

Ukrywając pewne krawędzie, możesz uzyskać efekt trójkąta (jak widać powyżej, tworząc różne części w różnych kolorach). transparent jest często używany jako kolor krawędzi, aby uzyskać kształt trójkąta.


486
2017-08-16 03:58





Zacznij od podstawowego kwadratu i granic. Każda obramowanie otrzyma inny kolor, dzięki czemu możemy je odróżnić:

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

co daje to:

square with four borders

Ale nie ma potrzeby górnej granicy, więc ustaw jej szerokość 0px. Teraz nasze graniczne dno 200px sprawi, że nasz trójkąt będzie miał wysokość 200 pikseli.

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

a dostaniemy to:

bottom half of square with four borders

Następnie, aby ukryć dwa trójkąty boczne, ustaw kolor obramowania na przezroczysty. Ponieważ górna granica została skutecznie usunięta, możemy ustawić przezroczystą granicę koloru na przezroczystą.

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

wreszcie dostaliśmy to:

triangular bottom border


437
2017-08-17 11:16



Fajnie, ale nie jest to to samo droga? :-) - Stanislav Shabalin
There's another way to draw .., który okazuje się być taki sam :) Dobre wyjaśnienie - Hammad Khan
-1 dla używania plików JPEG z ogromnymi artefaktami. Ale +1 za stworzenie świetnego przykładu, kiedy nie używać plików JPEG, do których mogę się odsyłać w przyszłości w celu odstraszania. ;) - Henrik Heimbuerger
dlaczego zamiast tego nie używa się gif? - prusswan
Sorry @hheimbuerger, zepsułem twój przykład naprawiając obrazy. Będziesz musiał podać link poprawka 2 tej odpowiedzi w przyszłości. - Rory O'Kane


Odmienne podejście:

Trójkąty CSS3 z transformacją obracaj

Kształt trójkątny jest dość łatwy do wykonania przy użyciu tej techniki. Dla osób, które preferują animację wyjaśniającą działanie tej techniki, należy:

gif animation : how to make a triangle with transform rotate

W przeciwnym razie, jest to szczegółowe wyjaśnienie w 4 aktach (to nie jest tragedia), jak zrobić trójkąt prostokątny równoramienny z jednym elementem.

  • Uwaga 1: dla trójkątów niebędących równoramiennymi i fantazyjnych rzeczy można zobaczyć krok 4.
  • Uwaga 2: w poniższych opisach prefiksy dostawców nie są uwzględniane. są one zawarte w prezentacje codepen.
  • Uwaga 3: HTML dla następującego wyjaśnienia jest zawsze:  <div class="tr"></div>

KROK 1 : Zrób div

Łatwo, po prostu upewnij się, że width = 1.41 x height. Możesz użyć dowolnej techniki (Spójrz tutaj) w tym użycie procentów i dopełnienia-dołu, aby zachować proporcje i zrobić elastyczny trójkąt. Na poniższym obrazku element div ma złotożółte obramowanie.

W tym dziale wstaw a pseudo element i nadaj mu 100% szerokości i wysokości rodzica. Pseudo element ma niebieskie tło na poniższym obrazie.

Making a CSS triangle with transform roate step 1

W tym momencie mamy to 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;
}

KROK 2 : Obróćmy się

Po pierwsze, najważniejsze: zdefiniuj początek transformacji. The domyślne pochodzenie znajduje się w środku pseudo elementu i potrzebujemy go w lewym dolnym rogu. Dodając to CSS do pseudo elementu:

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

Teraz możemy obrócić pseudo element o 45 stopni zgodnie z ruchem wskazówek zegara transform : rotate(45deg);

Creating a triangle with CSS3 step 2

W tym momencie mamy to 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);
}

KROK 3: ukryj to

Aby ukryć niepożądane części pseudo elementu (wszystko, co przepełnia div z żółtą ramką), wystarczy ustawić overflow:hidden; na pojemniku. po usunięciu żółtej granicy dostaniesz ... a TRÓJKĄT! :

PRÓBNY

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

KROK 4: idź dalej ...

Jak pokazano w próbny, możesz dostosować trójkąty:

  1. Spraw, aby były cieńsze lub bardziej płaskie dzięki zabawie skewX().
  2. Ustaw je tak, aby były skierowane w lewo, w prawo lub w innym kierunku, grając za pomocą transformacji i kierunku obrotu.
  3. Robić trochę refleksji z właściwością 3D transformacji.
  4. Dać granice trójkąta
  5. Umieść obraz wewnątrz trójkąta
  6. Znacznie więcej ... Uwolnij moce CSS3!

Dlaczego warto korzystać z tej techniki?

  1. Trójkąt może łatwo reagować.
  2. Możesz zrobić trójkąt z obramowaniem.
  3. Możesz zachować granice trójkąta. Oznacza to, że możesz aktywować stan wskaźnika myszy lub zdarzenia kliknięcia tylko wtedy, gdy kursor jest wewnątrz trójkąta. Może to być bardzo przydatne w niektórych sytuacjach, takich jak ten gdzie każdy trójkąt nie może pokryć sąsiadów, więc każdy trójkąt ma swój własny stan zawisu.
  4. Możesz zrobić kilka fantazyjne efekty, takie jak odbicia.
  5. Pomoże Ci zrozumieć właściwości transformacji 2d i 3d.

Dlaczego nie skorzystać z tej techniki?

  1. Główną wadą jest zgodność przeglądarki, właściwości transformacji 2d są obsługiwane przez IE9 + i dlatego nie możesz używać tej techniki, jeśli planujesz wspierać IE8. Widzieć Mogę uzyć po więcej informacji. Dla niektórych fantazyjnych efektów przy użyciu trójwymiarowych transformacji odbicie Obsługa przeglądarki to IE10 + (patrz mogę uzyć po więcej informacji).
  2. Nie potrzebujesz niczego responsywnego, a prosty trójkąt jest w porządku dla ciebie, więc powinieneś wybrać technikę graniczną wyjaśnioną tutaj: lepszą kompatybilność przeglądarek i łatwiej zrozumieć dzięki postom amaizing tutaj.

215
2017-07-17 16:30



Warto wspomnieć, że 1,41 to przybliżenie √2 i długość przeciwprostokątnej trójkąta, który tworzysz, dlatego potrzebujesz (przynajmniej) tę szerokość. - KRyan
Chciałem zachować prostą odpowiedź, ale masz rację, należy wspomnieć o @KRyan - web-tiki
W rzeczywistości, próbując tego użyć, wzmianka o tym, jak różne szerokości użyć skewX zostały wyprowadzone byłyby użyteczne. - KRyan
Ta metoda działa lepiej, gdy potrzebujesz trójkąta o jednolitym brzegu 1px. - Roman Losev
Wow dla tej animowanej grafiki. Prawdziwy przykład zdjęcia może powiedzieć 1000 słów! - Gaurav Ramanan


Oto jest animacja w JSFiddle Stworzyłem dla demonstracji.

Zobacz także fragment poniżej.

To jest animowany GIF wykonany z Screencastu

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>


Wersja losowa

/**
 * 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>


Wszystko na raz

$('#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>


157
2017-11-29 11:21





Powiedzmy, że mamy następujący div:

<div id="triangle" />

Teraz Edycja CSS krok po kroku, aby uzyskać jasny obraz tego, co się dzieje wokół

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

To jest prosty div. Z bardzo prostym CSS. Laika może to zrozumieć. Div ma wymiary 150 x 150 pikseli przy granicy 50 pikseli. Zdjęcie jest załączone:

enter image description here

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

Teraz zmieniłem kolor obramowania wszystkich 4 stron. Obraz jest załączony.

enter image description here

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

Teraz właśnie zmieniłem wysokość i szerokość div z 150 pikseli na zero. Obraz jest załączony

enter image description here

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

Teraz uczyniłem wszystkie granice przezroczystymi, z wyjątkiem dolnej granicy. Obraz jest załączony poniżej.

enter image description here

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

Teraz zmieniłem kolor tła na biały. Obraz jest załączony.

enter image description here

Dlatego mamy trójkąt, którego potrzebowaliśmy.


40
2018-06-17 06:09





A teraz coś zupełnie innego ...

Zamiast używać sztuczek css nie zapominaj o rozwiązaniach tak prostych jak encje html:

&#9650;

Wynik:

Widzieć: Jakie są elementy HTML dla trójkątów w górę iw dół?


35
2017-12-01 12:40



Nie sądzę, że "pobity" jest tutaj odpowiednim słowem. Rozwiązanie opiera się na metrykach czcionki, więc dokładne pozycjonowanie jest raczej wątpliwe, nie wspominając o tym, że nie masz kontroli nad kształtem. - user776686


Rozważ poniższy trójkąt

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

Oto, co nam dano:

Small triangle output

Dlaczego wyszło w tym kształcie? Poniższy diagram wyjaśnia wymiary, pamiętaj, że 15px zostało użyte dla dolnej granicy, a 10px dla lewej i prawej strony.

Large triangle

Prosty trójkąt prostokątny można również łatwo usunąć, usuwając prawą krawędź.

Right angle triangle


29
2018-03-21 11:20





Idąc dalej, używając css na tej podstawie dodałem strzałki do moich pleców i następnych przycisków (tak, wiem, że nie jest to w 100% przeglądarka, ale i tak jest gładka).

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


27
2017-12-30 16:56



jak to nie jest przeglądarka? trójkąty powinny wrócić do IE6. - chriscauley
użycie: before i: after nie jest w 100% obsługiwane. - PseudoNinja
Elementy Psuedo nie są obsługiwane <IE8. - alex


Odmienne podejście. Z gradientem liniowym (dla IE, tylko IE 10+). Możesz użyć dowolnego kąta:

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

Tutaj jest jsfiddle


15
2017-07-26 00:19



To jest piękne rozwiązanie, ale należy zauważyć, że jest to tylko IE 10+. - Eric Hu


To stare pytanie, ale myślę, że warto podzielić się tym, jak stworzyć strzałę przy użyciu tej techniki trójkąta.

Krok 1:

Pozwala utworzyć 2 trójkąty, dla drugiego będziemy używać :after pseudo klasy i umieść go tuż pod drugim:

2 triangles

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

Krok 2

Teraz musimy ustawić dominujący kolor obramowania drugiego trójkąta na ten sam kolor tła:

enter image description here

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

Fiddle ze wszystkimi strzałkami:
http://jsfiddle.net/tomsarduy/r0zksgeu/


9
2017-07-31 20:42