Трикутник css зробити намалювати

Розбираючись в одному зацікавив мене проекті натрапив на цікавий приклад як створити трикутник css. А так як трикутники стали постійно використовуваними елементами веб сторінки, то ми повинні їх вміти создавать.Об цьому методі і буде ця замітка.

Погуглити питання як зробити трикутник css знайшов ще кілька цікавих методів, але приклад з проекту мені сподобався більше. Це метод старий і давно відомий. Він заснований на використанні таких css властивостей як border-color і border-width. Суть методу проста. Створюємо будь-якої блок (div), і та задаємо йому css властивості border-color і border-width. Властивість border-width задає товщину кордону, і приймає чотири значення. Товщина кордону зверху, праворуч, знизу, зліва. Нагадую що під час запису цього css властивості відлік починається від верхньої межі і йде за годинниковою стрілкою. Таким чином, що б створити з нашого блоку трикутник вершиною вгору в властивості border-width запишемо верхню межу толшиной 0, ліву і праву товщиною в половину блоку, а нижню в товщину блоку. З властивістю border-color той же я думаю вже стало зрозуміло. Воно теж приймає чотири значення по сторонам блоку. Якщо у нас трикутник на білому тлі, все кордону задаємо білим кольором, крім нижньої. Ну а тепер, як звичайно, приклад. Так як замітка вийшла не дуже велика вирішив додати до трикутника анімацію на css.

Приклад: Для анімації наведіть на трикутник

Як бачите все досить просто. До недоліку такого методу можна віднести, що трикутнику не вийде поставити тіні і інші красивості. Але метод простий і кроссбраузерен. Чи використовувати його в проектах вирішувати вам.