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

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>

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

Odpowiedzi:

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>

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 :

kwadrat z czterema ramkami

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 :

dolna połowa kwadratu z czterema ramkami

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 :

trójkątna dolna granica

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ą

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:

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

Animowany Gif Trójkąta


Wersja losowa


Wersja naraz

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>

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>

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:

wprowadź opis zdjęcia tutaj

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>

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


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.

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:

2 trójkąty

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

wprowadź opis zdjęcia tutaj

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

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.

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.

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

Trójkąt CSS z gradientem

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:

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

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

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

Trójkąt CSS z gradientem

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:

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:

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

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>

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>

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.

  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>

Utwórz trójkąty CSS, używając gradientu stożkowego

coding-dude.com
źródło