HTML
Ви можете зробити їх за допомогою одного div. Приємно мати уроки для кожного напряму.
CSS
Ідея - коробка з нульовою шириною та висотою. Фактична ширина і висота стрілки визначається шириною межі. Наприклад, у стрілці вгору нижня межа пофарбована, а ліва та права прозорі, що утворює трикутник.
.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; )Демо
Дивіться анімацію пера для пояснення трикутників CSS від Кріса Койєра (@chriscoyier) на CodePen.
Приклади
Дейв Еверітт пише:
Для рівностороннього трикутника варто зазначити, що висота становить 86,6% від ширини, так (межа-ліва-ширина + межа-права-ширина) * 0,866% = межа-нижня ширина