HTML
Możesz je utworzyć za pomocą jednego elementu div. Fajnie jest mieć zajęcia w każdym kierunku.
CSS
Pomysł to pudełko o zerowej szerokości i wysokości. Rzeczywista szerokość i wysokość strzałki zależy od szerokości obramowania. Na przykład w strzałce w górę dolna krawędź jest kolorowa, a lewa i prawa są przezroczyste, co tworzy trójkąt.
.arrow-up ( width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; ) .arrow-down ( width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; ) .arrow-right ( width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; ) .arrow-left ( width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; )Próbny
Zobacz animację pióra wyjaśniającą trójkąty CSS autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Przykłady
Dave Everitt pisze w:
W przypadku trójkąta równobocznego warto zaznaczyć, że wysokość wynosi 86,6% szerokości, więc (border-left-width + border-right-width) * 0,866% = border-bottom-width