Istnieje wiele różnych kształtów CSS w CSS Tricks - Shapes of CSS, a ja jestem szczególnie zaskoczony trójkątem:

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

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

Jak powiedział Alex , granice o równej szerokości stykają się ze sobą pod kątem 45 stopni:

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

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

... i wysokość 0 ...

... i wreszcie, czynisz dwie boczne krawędzie przezroczystymi:

Daje to trójkąt.

Granice używają krawędzi pod kątem, w których się przecinają (kąt 45 ° z granicami o równej szerokości, ale zmiana szerokości granic może przekrzywić kąt).

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

<div></div>

Zobacz jsFiddle .

Ukrywając określone granice, możesz uzyskać efekt trójkąta (jak widać powyżej, zmieniając różne porcje na różne kolory). transparentjest często używany jako kolor krawędzi w celu uzyskania kształtu trójkąta.

Zacznij od podstawowego kwadratu i granic. Każda ramka otrzyma inny kolor, abyśmy mogli 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 ci to :

Ale nie ma potrzeby górnej granicy, więc ustaw jej szerokość na 0px. Teraz nasze dolne obramowanie 200pxspowoduje, ż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;
}

i otrzymamy to :

Następnie, aby ukryć dwa trójkąty boczne, ustaw kolor obramowania na przezroczysty. Ponieważ górna ramka została skutecznie usunięta, możemy ustawić kolor górnej granicy również na przezroczysty.

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

w końcu otrzymujemy to :

Odmienne podejście:

Trójkąty CSS3 z transformacją obracają się

Trójkątny kształt jest dość łatwy do wykonania przy użyciu tej techniki. Dla osób, które wolą zobaczyć animację wyjaśniającą działanie tej techniki, jest to:

• Link do ANIMACJI: Jak zrobić trójkąt CSS3 .
• I DEMO: trójkąty CSS3 wykonane z transformacją obracają się.

W przeciwnym razie tutaj znajduje się szczegółowe wyjaśnienie w 4 aktach (nie jest to tragedia), w jaki sposób wykonać trójkąt równoramienny z jednym elementem.

• Uwaga 1: dla trójkątów innych niż równoramienne i fantazyjnych rzeczy możesz zobaczyć krok 4 .
• Uwaga 2: w poniższych fragmentach nie uwzględniono prefiksów dostawców. są one zawarte w demo 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 ( patrz tutaj ), w tym wartości procentowych i wypełnienia-dno, aby utrzymać proporcje i stworzyć responsywny trójkąt . Na poniższym obrazku div ma złotożółtą obwódkę.

W tym div wstaw pseudoelement i podaj mu 100% szerokości i wysokości elementu nadrzędnego. Pseudoelement ma niebieskie tło na poniższym obrazku.

W tym momencie mamy ten 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

Po pierwsze, najważniejsze: zdefiniuj początek transformacji . Domyślne pochodzenie jest w środku elementu pseudo i musimy go w lewym dolnym rogu. Dodając ten CSS do pseudoelementu:

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

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

W tym momencie mamy ten 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

Aby ukryć niechciane części pseudoelementu (wszystko, co przepełnia div z żółtą ramką), wystarczy ustawić overflow:hidden;na pojemniku. po usunięciu żółtej ramki otrzymasz ... TRÓJKĄT ! :

PRÓBNY

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 wersji demonstracyjnej , możesz dostosować trójkąty:

1. Spraw, aby były cieńsze lub bardziej płaskie, grając z nimi skewX().
2. Ustaw je w lewo, w prawo lub w dowolnym innym kierunku, grając z orign transformacji i kierunkiem obrotu.
3. Dokonaj refleksji za pomocą właściwości transformacji 3D.
4. Podaj granice trójkąta
5. Umieść obraz w trójkącie
6. Znacznie więcej ... Uwolnij moc CSS3 !

Dlaczego warto korzystać z tej techniki?

1. Trójkąt może łatwo reagować.
2. Możesz zrobić trójkąt z ramką .
3. Możesz zachować granice trójkąta. Oznacza to, że możesz aktywować stan najechania myszą lub zdarzenie kliknięcia tylko wtedy, gdy kursor znajduje się w trójkącie . Może to być bardzo przydatne w niektórych sytuacjach, takich jak ta, w której każdy trójkąt nie może nakładać się na sąsiadów, więc każdy trójkąt ma swój własny stan zawisu.
4. Możesz tworzyć 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 kompatybilność przeglądarki , właściwości transformacji 2d są obsługiwane przez IE9 + i dlatego nie można użyć tej techniki, jeśli planuje się obsługę IE8. Aby uzyskać więcej informacji, zobacz CanIuse . W przypadku niektórych fantazyjnych efektów przy użyciu przekształceń 3d, takich jak obsługa przeglądarki refleksji, to IE10 + ( więcej informacji można znaleźć w canIuse ).
2. Nie potrzebujesz niczego responsywnego, a zwykły trójkąt jest dla ciebie odpowiedni, powinieneś wybrać technikę obramowania wyjaśnioną tutaj: lepszą kompatybilność z przeglądarką i łatwiejsze do zrozumienia dzięki amaizing postom tutaj.

Oto animacja w JSFiddle, którą stworzyłem dla celów demonstracyjnych.

Zobacz też fragment kodu poniżej.

To jest animowany GIF wykonany z screencastu

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>

Wersja naraz

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

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

<div id="triangle" />

Teraz edytuj CSS krok po kroku, aby uzyskać jasny obraz tego, co się dzieje

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. Tak więc laik może zrozumieć. Div ma wymiary 150 x 150 pikseli z ramką 50 pikseli. Obraz jest załączony:

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 właśnie zmieniłem kolor obramowania ze wszystkich 4 stron. Obraz jest załączony.

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 ze 150 pikseli na zero. Obraz jest załączony

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 wszystkie granice są przezroczyste oprócz dolnej. Obraz jest załączony poniżej.

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 właśnie zmieniłem kolor tła na biały. Obraz jest załączony.

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

A teraz coś zupełnie innego ...

Zamiast używać sztuczek css, nie zapomnij o rozwiązaniach tak prostych jak encje HTML:

▲

Wynik:

▲

Zobacz: Jakie są jednostki HTML dla trójkątów w górę iw dół?

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

Dlaczego wyszło w tym kształcie? Poniższy schemat objaśnia wymiary. Zwróć uwagę, że dolna ramka została ustawiona na 15 pikseli, a na lewą i prawą zastosowano 10 pikseli.

Wykonanie trójkąta pod kątem prostym jest również dość łatwe, usuwając prawą ramkę.

Idąc o krok dalej, używając css opartego na tym dodałem strzałki do tyłu i do następnych przycisków (tak, wiem, że nie jest to w 100% przeglądarka internetowa, ale mimo wszystko zręczna).

.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, ten trójkąt zostanie utworzony ze względu na sposób, w jaki granice elementów współpracują ze sobą w HTML i CSS ...

Ponieważ zwykle używamy ramek 1 lub 2px, nigdy nie zauważamy, że ramki tworzą kąty 45 ° względem siebie o tej samej szerokości, a jeśli szerokość się zmienia, zmienia się również stopień kąta, uruchom kod CSS, który utworzyłem poniżej:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

Następnie w następnym kroku nie mamy żadnej szerokości ani wysokości, coś takiego:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

A teraz sprawiamy, że lewa i prawa krawędź są niewidoczne, aby uczynić nasz pożądany trójkąt, jak poniżej:

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

<div class="triangle"></div>

Jeśli nie chcesz uruchamiać fragmentu kodu, aby zobaczyć kroki, utworzyłem sekwencję obrazów, aby przejrzeć wszystkie kroki na jednym obrazie:

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>

Oto jsfiddle

CSS clip-path

Czuję, że to pytanie przeoczyło; clip-path

clip-path w skrócie

Przycinanie, z tą clip-pathwłaściwością, przypomina wycinanie kształtu (jak okrąg lub pięciokąt) z prostokątnego kawałka papieru. Właściwość należy do specyfikacji „ CSS Masking Module Level 1 ”. Specyfikacja mówi: „Maskowanie CSS zapewnia dwa sposoby częściowego lub całkowitego ukrywania części elementów wizualnych: maskowanie i obcinanie”.

• Wyciąg ze Smashing Magazine

clip-pathużyje samego elementu, a nie jego granic, aby wyciąć kształt określony w jego parametrach. Wykorzystuje bardzo prosty układ współrzędnych oparty na procentach, co sprawia, że ​​edycja jest bardzo łatwa i oznacza, że ​​możesz go podnieść i stworzyć dziwne i wspaniałe kształty w ciągu kilku minut.

Przykład kształtu trójkąta

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>

Minusem

Ma to obecnie poważną wadę, jedną z nich jest duży brak wsparcia, tak naprawdę jest objęty -webkit-przeglądarkami i nie ma wsparcia w IE, a jedynie bardzo częściowy w FireFox.

Zasoby

Oto kilka przydatnych zasobów i materiałów, które pomogą lepiej zrozumieć, clip-patha także rozpocząć tworzenie własnych.

• Clippy - clip-pathGenerator
• Plik rekomendacji kandydatów W3C
• clip-pathDokumentacja MDN
• clip-path Obsługa przeglądarki

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

Krok 1:

Stwórzmy 2 trójkąty, dla drugiego użyjemy :afterpseudoklasy i umieścimy ją tuż pod drugim:

.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 tylko ustawić dominujący kolor obramowania drugiego trójkąta na ten sam kolor tła:

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

Baw się wszystkimi strzałami:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Trójkąt mixin SASS (SCSS)

Napisałem to, aby ułatwić (i DRY) automatyczne wygenerowanie trójkąta CSS:

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

przykład zastosowania:

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

Strona placu zabaw

Ważna uwaga:
jeśli trójkąt wydaje się pikselowany w niektórych przeglądarkach, wypróbuj jedną z opisanych tutaj metod .

^{Jeśli chcesz zastosować obramowanie do trójkąta, przeczytaj to: Utworzyć trójkąt za pomocą CSS?}

Prawie wszystkie odpowiedzi koncentrują się na trójkącie zbudowanym za pomocą obramowania, więc zamierzam rozwinąć tę linear-gradientmetodę (jak rozpoczęto w odpowiedzi @lima_fil ).

Użycie wartości stopnia, takiej jak 45°, zmusi nas do przestrzegania określonego stosunku height/widthw celu uzyskania pożądanego trójkąta, a to nie będzie odpowiadać:

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

Zamiast tego powinniśmy wziąć pod uwagę predefiniowane wartości kierunku jak to bottom , to topitp W tym przypadku możemy uzyskać wszelkiego rodzaju kształt trójkąta, utrzymując ją czuły.

1) Prostokąt trójkąt

W celu uzyskania takiego trójkąta trzeba jeden liniowy gradiencie i ukośnie jak to bottom right, to top left, to bottom left, etc.

.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) trójkąt równoramienny

Do tego potrzebujemy 2 gradientów liniowych jak wyżej i każdy z nich zajmie połowę szerokości (lub wysokości). To tak, jakbyśmy tworzyli lustrzane odbicie pierwszego trójkąta.

.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) trójkąt równoboczny

Ten jest nieco trudny w obsłudze, ponieważ musimy zachować relację między wysokością i szerokością gradientu. Będziemy mieli ten sam trójkąt jak powyżej, ale sprawimy, że obliczenia będą bardziej złożone, aby przekształcić trójkąt równoramienny w równoboczny.

Aby to ułatwić, rozważymy, że szerokość naszego diva jest znana, a wysokość jest wystarczająco duża, aby móc narysować nasz trójkąt wewnątrz ( height >= width).

Mamy dwa gradientu g1i g2, niebieskie jest to szerokość div wi każdy gradient będzie miała 50% (to w/2), a każda strona trójkąta sould równe w. Zielona linia to wysokość obu gradientówhg i możemy łatwo uzyskać poniższy wzór:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w --->hg = 0.866 * w

Możemy polegać na calc()naszych obliczeniach i uzyskaniu potrzebnego wyniku:

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

Innym sposobem jest kontrolowanie wysokości div i utrzymanie łatwej składni gradientu:

.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) Losowy trójkąt

Aby uzyskać losowy trójkąt, jest to łatwe, ponieważ musimy po prostu usunąć warunek 50% każdego, ALE powinniśmy zachować dwa warunki (oba powinny mieć tę samą wysokość, a suma obu szerokości powinna wynosić 100%).

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

Ale co, jeśli chcemy zdefiniować wartość dla każdej strony? Po prostu musimy ponownie wykonać obliczenia!

Zdefiniujmy hg1i hg2jak wysokość naszego gradientu (oba są równe czerwoną linią) wtedy wg1i wg2jak szerokość naszego gradientu ( wg1 + wg2 = a). Nie będę szczegółowo wyliczał obliczeń, ale na koniec będziemy mieli:

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

Teraz osiągnęliśmy limit CSS, ponieważ nawet calc()nie będziemy w stanie tego zaimplementować, dlatego musimy po prostu ręcznie zebrać ostateczny wynik i użyć go jako stałej wielkości:

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

Premia

Nie powinniśmy zapominać, że możemy również zastosować obrót i / lub pochylenie i mamy więcej opcji, aby uzyskać więcej trójkąta:

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

I oczywiście powinniśmy pamiętać o rozwiązaniu SVG, które może być bardziej odpowiednie w niektórych sytuacjach:

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>

oto kolejne skrzypce:

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

Inni już to dobrze wyjaśnili. Pozwól, że dam ci animację, która szybko to wyjaśni: http://codepen.io/chriscoyier/pen/lotjh

Oto kod do zabawy i nauki pojęć.

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

Graj z tym i zobacz, co się stanie. Ustaw wysokość i szerokość na zero. Następnie usuń górną ramkę i ustaw przezroczystość lewej i prawej strony lub po prostu spójrz na poniższy kod, aby utworzyć trójkąt css:

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

Jeśli chcesz się bawić z border-size, widtha heighti zobaczyć, jak te, mogą tworzyć różne kształty, spróbuj tego:

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>

Spróbuj tego:-

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

<div class="triangle"></div>

Wiem, że to stary, ale chciałbym dodać do tej dyskusji, że istnieje co najmniej 5 różnych metod tworzenia trójkąta przy użyciu samego HTML i CSS.

1. Za pomocą borders
2. Za pomocą linear-gradient
3. Za pomocą conic-gradient
4. Korzystanie transformioverflow
5. Za pomocą clip-path

Myślę, że wszystkie zostały tutaj omówione, z wyjątkiem metody 3, za pomocą conic-gradient, więc podzielę się tutaj:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>