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

Question

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

Jest mnóstwo różnych kształtów CSS na sztuczki CSS-kształty CSS i 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?

1665

css css3 geometry polygon css-shapes

Author: dippas, 2011-08-16

Source

18 answers

Obramowania wykorzystują kątową krawędź, gdzie się przecinają(kąt 45° przy równej szerokości obramowania, ale zmiana szerokości obramowania może przekrzywić kąt).

Przykład obramowania

JsFiddle .

Ukrywając pewne obramowania, możesz uzyskać efekt trójkąta (jak widać powyżej, zmieniając różne części w różne kolory). transparent jest często używany jako kolor krawędzi do uzyskania kształtu trójkąta.

487

Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 07:04:02

Zacznij od podstawowego kwadratu i granic. Każda obramowanie będzie miało inny kolor, więc możemy je rozróżnić:

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

Co daje to :

Ale nie ma potrzeby stosowania górnej granicy, więc ustaw jej szerokość na 0px. Teraz nasz border-bottom 200px sprawi, że nasz trójkąt będzie wysoki o 200px.

.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 boczne Trójkąty, Ustaw kolor obramowania na przezroczysty. Ponieważ górna granica została skutecznie usunięta, możemy również ustawić kolor border-top-color 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 :

442

Author: Mouna Cheikhna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 20:45:25

Inne podejście:

Trójkąty CSS3 z transformatą

Trójkątny kształt jest dość łatwy do wykonania przy użyciu tej techniki. Dla ludzi, którzy wolą zobaczyć animację wyjaśniającą, jak działa ta technika, oto ona:

Animacja gif : jak zrobić trójkąt z transform rotate

Link do animacji : Jak zrobić CSS3 Trójkąt.
i DEMO : CSS3 made with transform obróć się.

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

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

Krok 1: zrób div

Easy, just make sure that width = 1.41 x height. Możesz użyć dowolnej technologii (zobacz tutaj), w tym wykorzystanie procentów i padding-bottom do zachowania proporcji i utworzenia trójkąta responsywnego . Na poniższym obrazku div ma złotą żółtą obwódkę.

W tym div, Wstaw pseudo element i daj mu 100% szerokości i wysokości rodzica. Pseudo element ma niebieski tło na poniższym obrazku.

Tworzenie trójkąta CSS z transform roate Krok 1

W tym momencie mamy 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 pochodzenie transformaty. domyślne pochodzenie znajduje się w środku pseudo elementu i potrzebujemy go w lewym dolnym rogu. Poprzez dodanie tego CSS do pseudo elementu:

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

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

Tworzenie trójkąta z CSS3 Krok 2

W tym momencie mamy CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

Krok 3: Ukryj to

Aby ukryć niechciane części pseudo elementu (wszystko, co przepełnia div żółtą obwódką), wystarczy ustawić overflow:hidden; na kontenerze. po usunięciu żółtej granicy, otrzymasz... a Trójkąt ! :

DEMO

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: Przejdź dalej...

Jak pokazano w demo , możesz dostosować Trójkąty:

uczyń je cieńszymi lub bardziej pochlebnymi, bawiąc się skewX().
ustaw je w lewo, w prawo lub w dowolnym innym kierunku, bawiąc się transformacją i kierunkiem obrotu.
zrób jakiś refleks z właściwością transformacji 3D.
podaj granice trójkąta
umieść obraz wewnątrz trójkąta

CSS3

Dlaczego używać tej techniki?

trójkąt może łatwo reagować.
możesz utworzyć trójkąt z obramowaniem.
możesz zachować granice trójkąta. Oznacza to, że możesz wyzwolić stan najazdu lub zdarzenie kliknięcia tylko wtedy, gdy kursor jest wewnątrz trójkąta. To może stać się bardzo przydatne w niektórych sytuacjach, takich jak ten gdzie każdy trójkąt nie można nakładać sąsiadów, więc każdy trójkąt ma swój własny stan zawisu.
możesz zrobić kilka fantazyjnych efektów, takich jak odbicia.
pomoże Ci zrozumieć właściwości transformacji 2d i 3d.

Dlaczego nie użyć tej techniki?

główną wadą jest kompatybilność przeglądarki , właściwości transformacji 2d są obsługiwane przez IE9+ i dlatego nie możesz użyć tej techniki, jeśli planujesz wspierać IE8. Zobacz CanIuse więcej informacji. Dla niektórych fantazyjnych efektów przy użyciu przekształceń 3d, takich jak odbicie obsługa przeglądarki jest IE10+ (zobacz canIuse aby uzyskać więcej informacji).
nie potrzebujesz niczego responsywnego, a zwykły trójkąt jest dla Ciebie odpowiedni, więc powinieneś wybrać technikę granicy opisaną tutaj: lepszą kompatybilność przeglądarki i łatwiejszą do zrozumienia dzięki amaizującym postom tutaj.

222

Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:48

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

Zobacz także fragment poniżej.

To jest animowany GIF zrobiony z Screencastu [12]}

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>

Losowa wersja

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

All at once version

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

162

Author: HerrSerker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-14 10:50:37

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

<div id="triangle" />

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

Krok 1: Jsfiddle Link:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

To jest prosty div. Z bardzo prostym CSS. Żeby laik mógł to zrozumieć. Div ma wymiary 150 x 150 pikseli z obramowaniem 50 pikseli. Obraz jest dołączony:

Tutaj wpisz opis obrazka

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 obramowanie-kolor wszystkich 4 stron. Obraz jest załączony.

Tutaj wpisz opis obrazka

Krok:3 Jsfiddle Link:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

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

Tutaj wpisz opis obrazka

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 zrobiłem wszystkie granice przezroczyste z wyjątkiem dolnej granicy. Obraz jest załączony poniżej.

Tutaj wpisz opis obrazka

Krok 5: JSfiddle Link:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

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

Tutaj wpisz opis obrazka

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

41

Author: Rai Ammad Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-03 23:37:34

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ą encje HTML dla trójkątów w górę i w dół?

35

Author: Community,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:54

Rozważmy 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:

Małe wyjście trójkąta

Dlaczego wyszedł w takim kształcie? Poniższy schemat wyjaśnia wymiary, zauważ, że 15px zostało użyte dla dolnej granicy, a 10px zostało użyte dla lewej i prawej.

Duży trójkąt

Dość łatwo jest utworzyć trójkąt prostokątny również poprzez usunięcie prawej krawędzi.

Trójkąt prostokątny

29

Author: Daniel Imms,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 21:02:13

Idąc o krok dalej, używając css opartego na tym dodałem strzałki na plecach i następne przyciski(tak Wiem, że nie jest to 100% cross-browser, ale slick niemniej).

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

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

27

Author: PseudoNinja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-05 12:33:22

Inne podejście. Z gradientem liniowym (dla IE, TYLKO IE 10+). Można 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

16

Author: lima_fil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 20:39:08

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 obramowań 1 lub 2px, nigdy nie zauważamy, że obramowania tworzą kąty 45° względem siebie o tej samej szerokości i jeśli szerokość się zmieni, stopień kąta również się zmieni, Uruchom kod CSS, który stworzył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ś w rodzaju to:

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

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

I 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 uruchomić fragmentu, aby zobaczyć kroki, stworzyłem sekwencję obrazów, aby spojrzeć na wszystkie kroki w jednym obrazie:

13

Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-09 11:55:53

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

Krok 1:

Stwórzmy 2 Trójkąty, dla drugiego użyjemy pseudo klasy :after i umieścimy ją tuż pod drugą:

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

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

Fiddle with all the arrows:
http://jsfiddle.net/tomsarduy/r0zksgeu/

9

Author: Tom Sarduy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-31 20:42:55

CSS `clip-path`

To jest coś, co czuję, że to pytanie przeoczyło; clip-path

clip-path w skrócie

Obcinanie, z właściwością clip-path, jest podobne do wycinania kształtu (jak koło lub pentagon) z prostokątnej kartki 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 wycinanie".

wyciąg z Smashing Magazine

clip-path użyje samego elementu, a nie jego obramowania, aby wyciąć kształt określony w jego parametrach. Wykorzystuje super prosty system koordynacji oparty na procentach, który sprawia, że edycja jest bardzo łatwa i oznacza, że możesz ją podnieść i stworzyć dziwne i wspaniałe kształty w ciągu kilku minut.

Kształt Trójkąta Przykład

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>

Minus

Ma w tej chwili poważną minusę, jedną z nich jest poważny brak wsparcia, tylko tak naprawdę jest objęty w -webkit- przeglądarkach i nie ma wsparcia na IE i tylko bardzo częściowy w Firefoksie.

Zasoby

Oto kilka przydatnych zasobów i materiałów, które pomogą lepiej zrozumieć clip-path, a także zacząć tworzyć własne.

9

Author: Stewartside,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 16:10:59

Sass (SCSS) triangle mixin

Napisałem to, aby ułatwić (i osuszyć) automatyczne generowanie 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 użycia:

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, spróbuj jednej z metod opisanych tutaj .

8

Author: vsync,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-28 14:35:46

I made a sample in enjoycss

Http://enjoycss.com/5p#border

Możesz się nim pobawić i zobaczyć jak to się zmienia;)

Tutaj wpisz opis obrazka

5

Author: Nedudi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-12 15:40:37

Prawie wszystkie odpowiedzi skupiają się na trójkącie zbudowanym przy użyciu border, więc zamierzam opracować metodę linear-gradient (tak jak zaczęła się w odpowiedzi @ lima_fil).

Użycie wartości stopnia jak 45° zmusi nas do przestrzegania określonego stosunku height/width w celu uzyskania trójkąta, który chcemy, a to nie będzie responsywne:

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 50%,red 0);
  
  /*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, takie jak to bottom, to top, itd. W tym przypadku możemy uzyskać dowolny kształt trójkąta, zachowując jego responsywność.

1) trójkąt prostokątny

Aby otrzymać taki trójkąt potrzebujemy jednego gradientu liniowego i kierunku ukośnego 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 50%,red 0);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 50%,red 0);
  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 powyżej i każdy z nich zajmie połowę szerokości (lub wysokości). To tak, jakbyśmy tworzyli lustrzane odbicie pierwszego Trójkąt.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:50.9% 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ć zależność między wysokością i szerokością gradientu. Będziemy mieli ten sam trójkąt, co powyżej, ale uczynimy obliczenia bardziej złożonymi, aby przekształcić trójkąt równoramienny w równoboczny.

Aby ułatwić, weźmiemy pod uwagę, że szerokość naszego div jest znana, a wysokość jest wystarczająco duża, aby móc narysuj nasz Trójkąt (height >= width).

Mamy nasze dwa gradienty g1 i g2, Niebieska linia jest szerokością div w i każdy gradient będzie miał 50% (w/2) i każdy bok trójkąta będzie równy w. Zielona linia jest wysokością obu gradientów hg i możemy łatwo uzyskać wzór poniżej:

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

Więc musimy polegać na cacl() aby wykonać nasze obliczenia i uzyskać potrzebny wynik:

.tri {
  --w:100px;
  width:var(--w);
  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:calc(var(--w)/2 + 0.5%)  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>

4) Trójkąt losowy

Aby otrzymać losowy trójkąt, jest to proste, ponieważ po prostu musimy usunąć warunek 50% każdego z nich, 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 wykonać obliczenia jeszcze raz!

Zdefiniujmy hg1 i hg2 jako wysokość naszego gradientu (oba są równe czerwonej linii) następnie wg1 i wg2 jako szerokość naszego gradientu (wg1 + wg2 = a). Nie będę szczegółowo wyliczał, ale na końcu 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 z calc() nie będziemy w stanie tego zaimplementować, więc po prostu musimy zebrać końcowy wynik ręcznie i użyć ich jako naprawionych Rozmiar:

.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 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  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>

Bonus

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

Oczywiście należy 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>

4

Author: Temani Afif,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-08 21:33:15

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/

3

Author: Doml The-Bread,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-06 16:54:03

Inni już to dobrze wyjaśnili. Pozwól, że dam ci animację, która wyjaśni to szybko: 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;
}

Pobaw się tym i zobacz, co się stanie. Ustaw wysokość i szerokość na zero. Następnie usuń górną ramkę i zrób przezroczystą lewą i prawą stronę lub po prostu spójrz na poniższy kod, aby utworzyć css Trójkąt:

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

3

Author: HelloWorldNoMore,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-14 02:05:23

score 2083 · Accepted Answer

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

Jak powiedział alex , granice o równej szerokości przylegają do siebie pod kątem 45 stopni:

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

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

brak górnej granicy

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

brak szerokości

...i wysokości 0...

brak wysokości

...i na koniec tworzysz przezroczyste obramowania:

przezroczyste obramowania boczne

To daje Trójkąt.

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

18 answers

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

Trójkąty CSS3 z transformatą

Krok 1: zrób div

Krok 2: obróćmy

Krok 3: Ukryj to

Krok 4: Przejdź dalej...

Dlaczego używać tej techniki?

Dlaczego nie użyć tej techniki?

Losowa wersja

All at once version

Krok 1:

Krok 2

CSS clip-path

Kształt Trójkąta Przykład

Minus

Zasoby

Sass (SCSS) triangle mixin

Przykład użycia:

Strona placu zabaw

CSS `clip-path`