Jak mogę utworzyć strzałkę używając tylko CSS?

Question

Widziałem następujący przykład:

.arrow { 
    height: 0; 
    width: 0; 
    border: 4px solid transparent; 
} 
.arrow.up { 
    border-bottom-color: #000; 
} 
.arrow.down { 
    border-top-color: #000; 
} 

http://jsfiddle.net/FrsGR/

Jednak nie mogę zrozumieć, jak tworzy strzały. Czy ktoś może mi to wyjaśnić?

Answer 1

Nie znałem wcześniej tej sztuczki, ale myślę, że ją rozumiem. Dolna krawędź nie jest kwadratowa, jest ścięta po bokach. Lewa krawędź będzie ścięta na górze i na dole. Dzięki temu granice różnych kolorów spełniają się idealnie. Ponieważ element strzałki ma 0 wysokości i szerokości, segment krawędzi jest tak szeroki na dole, jak określono w regule granicznej, ale zwęża się do szerokości 0 pikseli (rozmiar kontenera).

Możesz grać z efektem, ustawiając różne grubości krawędzi lub zmieniając "bok" granicy. "Strzałka" zawsze wskazuje przeciwny do kierunku określonego w regule. Dolna krawędź "wskazuje"; prawa krawędź "wskazuje" w lewo.

Oto krótki schemat:

Lewa strzałka jest podstęp. Prawe jest bardziej typową ramką, w której pojemnik ma pewne wymiary.

Answer 2

Weź pudełko. Powiedzmy, że ma 5 pikseli wysokości i 5 pikseli szerokości. Teraz powiedzmy, że ma granicę 4px. Oto, co powinieneś sobie wyobrazić: http://jsfiddle.net/FrsGR/190.

.arrow { // box 
    height: 5px; 
    width: 5px; 
    border: 4px solid blue; 
} 

Teraz wyobraź sobie, że skrzynka nie posiada szerokość lub wysokość, więc są tylko w lewo z granicami: http://jsfiddle.net/FrsGR/885/.

.arrow { // box with no width/height 
    height: 0; 
    width: 0; 
    border: 4px solid blue; 
} 

Teraz nakładają się na siebie, a to właśnie dzieje się z tworzeniem strzał. Linia nakładania jest narysowana po przekątnej od każdego narożnika do środka. Rezultatem końcowym są przezroczyste trójkąty u góry, z lewej i prawej strony, z czarnym trójkątem u dołu. Mam nadzieję, że pomogło!

Bardzo odniesienia: How do CSS triangles work?

Answer 3

CSS tworząc obramowanie wokół punktu (bez szerokości/wysokości, ale niektóre współrzędnych x, y) o wymiarze 4 piksele, jak określono w .arrow. To jest jak tworzenie koła o promieniu 4 pikseli, ale z uwagi na naturę granic CSS, "kółko" jest w rzeczywistości kwadratem.

można zobaczyć wszystkie cztery quandrants placu promienia 4px ten sposób:

.arrow.up { 
    border-top-color:blue; 
    border-right-color:green; 
    border-left-color:red; 
    border-bottom-color: #000; 
} 

Oto powiększony przykład za pomocą wielkości 40px zamiast 4px:

http://jsfiddle.net/dqB32/1/