MoreLesson 244Free preview
Arrows
This lesson is part of How To · All levels
Summary
Arrows in CSS can be created without images, for example by tricking a transparent border or spinning two borders on a box. The border approach is suitable for simple triangles, whereas the chevron is more neatly made of elements rotated 45 degrees. For icons that need good scale and accessibility, SVG remains the top choice.
Key points
- The CSS triangle is made of zero-dimensional elements with thick borders; the visible side is colored, the rest transparent.
- Chevron is made from two borders on a square square and then rotated 45 degrees.
- The direction of the arrow is changed by rotation or by changing the colored sides of the border.
- Label the accessible if the arrow is a button without text.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.