1846

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

Trójkąt CSS

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

Rozwiń fragment kodu

Jak i dlaczego to działa?

— Stanisław Shabalin
źródło

59

Możesz: jsfiddle.net/wbZet

— mskfisher

55

Co powiesz na kwadrat, którego nie ma? jsfiddle.net/minitech/sZgaa

— Ry-

1

@mskfisher Rozmiar dolnej granicy w trójkącie równobocznym nie powinien być sufitowy (sqrt (3) * 60)? Jeszcze kilka pikseli!

— Niloct,

1

@Niloct: Szybko spojrzałem na okrągłe liczby. Masz rację, dokładniejsze pomiary równoboczne byłyby (bok: 58, dół: 100) lub (bok: 60, dół: 104).

— mskfisher

1

Oto świetny generator trójkątów CSS dla wszystkich kierunków i rozmiarów: apps.eky.hk/css-triangle-generator

— Allan Stepps

2239

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:

granice spotykają się pod kątem 45 stopni, zawartość pośrodku

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

bez górnej granicy

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

bez szerokości

... i wysokość 0 ...

też nie ma wysokości

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

przezroczyste obramowania boczne

Daje to trójkąt.

— sdleihssirhc
źródło

10

@Jauzsika, możesz dodać te trójkąty do strony bez dodawania dodatkowych elementów po prostu za pomocą :beforelub :afterpseudo klas.

— zzzzBov

stackoverflow.com/questions/5623072/… to chyba to, o czym mówi pan BoltClock.

— thirtydot

99

Działaj z animacjami: jsfiddle.net/pimvdb/mA4Cu/104 . Tylko dla tych z nas, którzy potrzebują jeszcze więcej dowodów wizualnych, takich jak ja ...

— pimvdb

Z inna left-borderi right-border, nie-trójkąt równoramienny może być wykonana. A kiedy połączonych jest wiele trójkątów ... jsfiddle.net/zRNgz

— JiminP

2

Czy w 2018 r. Jest lepszy sposób na utworzenie trójkąta za pomocą CSS zamiast korzystania z tego hacka?

— Scribblemacher

518

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

Przykład granicy

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

<div></div>

Rozwiń fragment kodu

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.

— alex
źródło

487

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 :

— Mouna Cheikhna
źródło

21

Fajnie, ale czy to nie ten sam sposób? :-)

— Stanislav Shabalin

5

There's another way to draw .., co okazuje się być tym samym sposobem :) Jednak

— fajne

16

-1 do używania plików JPEG z dużymi artefaktami. Ale +1 za stworzenie świetnego przykładu, kiedy nie używać plików JPEG, które mogę połączyć w przyszłości w celu odstraszania. ;)

— Henrik Heimbuerger

3

dlaczego gif nie jest tutaj używany?

— prusswan,

4

Przepraszam @hheimbuerger, pomieszałem twój przykład, naprawiając obrazy. W przyszłości będziesz musiał link do wersji 2 tej odpowiedzi .

— Rory O'Kane,

263

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:

animacja gif: jak zrobić obrót trójkąta z transformacją

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.

Wykonanie trójkąta CSS z transformacją roate krok 1

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

Tworzenie trójkąta za pomocą CSS3 krok 2

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

Trójkąt CSS

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:

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

Dlaczego warto korzystać z tej techniki?

Trójkąt może łatwo reagować.
Możesz zrobić trójkąt z ramką .
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.
Możesz tworzyć fantazyjne efekty, takie jak odbicia .
Pomoże ci zrozumieć właściwości transformacji 2d i 3d.

Dlaczego nie skorzystać z tej techniki?

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

— web-tiki
źródło

16

Prawdopodobnie warto wspomnieć, że 1,41 to przybliżenie √2 i długość przeciwprostokątnej tworzonego trójkąta, dlatego potrzebujesz (przynajmniej) tej szerokości.

— KRyan

Chciałem, aby odpowiedź była prosta, ale masz rację, należy ją wymienić @KRyan

— web-tiki

Właściwie, przy próbie użycia tego, skewXużyteczne byłoby wspomnienie, w jaki sposób wyprowadzono różne szerokości do użycia z .

— KRyan

1

Ta metoda działa lepiej, gdy potrzebujesz trójkąta o szerokości 1 piksela.

— Roman Losev

To jest przypadek, w którym chcesz utworzyć granice dla trójkąta, utknąłem z drogą granic, gdy chcę utworzyć to pole adnotacji AnnotationBox

— vanduc1102

182

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

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Wersja losowa

Pokaż fragment kodu

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

Rozwiń fragment kodu

Wersja naraz

Pokaż fragment kodu

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

Rozwiń fragment kodu

— Junzen
źródło

49

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:

wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj

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

— Rai Ammad Khan
źródło

3

Dlaczego używałeś Nether Portal w pierwszym kroku?

— LuizLoyola

38

A teraz coś zupełnie innego ...

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

&#9650;

Wynik:

▲

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

— Społeczność
źródło

2

Nie sądzę, żeby słowo „pobity” było tutaj odpowiednim słowem. Rozwiązanie opiera się na metrykach czcionki, więc precyzyjne pozycjonowanie jest raczej wątpliwe, nie wspominając o tym, że nie masz kontroli nad kształtem.

— user776686

32

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:

Wyjście małego trójkąta

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.

Duży trójkąt

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

Trójkąt pod kątem prostym

— Daniel Imms
źródło

29

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>

Rozwiń fragment kodu

— PseudoNinja
źródło

1

jak to nie jest w różnych przeglądarkach? trójkąty powinny wrócić do IE6.

— chriscauley,

4

użycie: przed i po nie jest w 100% obsługiwane.

— PseudoNinja,

2

Elementy Psuedo nie są obsługiwane <IE8.

— alex

19

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>

Rozwiń fragment kodu

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>

Rozwiń fragment kodu

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>

Rozwiń fragment kodu

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

— Alireza
źródło

18

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>

Rozwiń fragment kodu

Oto jsfiddle

— lima_fil
źródło

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

— Eric Hu

13

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>

Rozwiń fragment kodu

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.

— Stewartside
źródło

11

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>

Rozwiń fragment kodu

Krok 2

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

Pokaż fragment kodu

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

Rozwiń fragment kodu

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

— Tom Sarduy
źródło

9

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 .

— vsync
źródło

8

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

Pokaż fragment kodu

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

Rozwiń fragment kodu

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.

Pokaż fragment kodu

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

Rozwiń fragment kodu

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.

Pokaż fragment kodu

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

Rozwiń fragment kodu

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:

Pokaż fragment kodu

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

Rozwiń fragment kodu

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

Pokaż fragment kodu

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

Rozwiń fragment kodu

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

Pokaż fragment kodu

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

Rozwiń fragment kodu

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:

Pokaż fragment kodu

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

Rozwiń fragment kodu

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:

Pokaż fragment kodu

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

Rozwiń fragment kodu

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

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Temani Afif
źródło

4

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/

— Doml The-Bread
źródło

4

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

— HelloWorldNoMore
źródło

2

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>

Rozwiń fragment kodu

— Danziger
źródło

1

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>

Rozwiń fragment kodu

— satish mallick
źródło

0

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.

Za pomocą borders
Za pomocą linear-gradient
Za pomocą conic-gradient
Korzystanie transformioverflow
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>

Rozwiń fragment kodu

— coding-dude.com
źródło

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

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

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

KROK 1: Zrób div

KROK 2: Obróćmy

KROK 3: ukryj

KROK 4: idź dalej ...

Dlaczego warto korzystać z tej techniki?

Dlaczego nie skorzystać z tej techniki?

Wersja losowa

Wersja naraz

CSS clip-path

Przykład kształtu trójkąta

Minusem

Zasoby

Krok 1:

Krok 2

Trójkąt mixin SASS (SCSS)

przykład zastosowania:

Strona placu zabaw

CSS `clip-path`