Як намалювати трикутник на css

Відео: ЯК ЗРОБИТИ ТРИКУТНИК НА ОСНОВІ CSS, TRIANGLE CSS, УРОКИ CSS і HTML, УРОК 16

Відео: Трикутник на HTML і CSS

Однією з дуже частих завдань, яка встає перед верстальником, це малювання трикутників на CSS. Наприклад, вони можуть бути на згортаються і розгортаються блоках, на що випадають меню, на якихось інших елементах інтерфейсу. І в цій статті я покажу найоптимальніші варіанти малювання трикутника на CSS.

1-й спосіб

Створення простого зображення зі стрілкою (Наприклад, вирізка з дизайну). Цей спосіб я сам постійно використовую, і знаю, що він є най-най популярним, і в деяких випадках єдиним. Але тут є великий мінус, якщо робити прозорі місця у трикутника, то треба використовувати PNG, Котрий IE6 не підтримує. А якщо брати JPG, то в залежності від фону потрібно брати те чи інше зображення. У підсумку, може бути 100 однакових стрілок, у яких різний фон, в результаті, буде 100 зображень.

Відео: Конверт трикутник як зробити

2-й спосіб

Цей спосіб вже використовує чистий CSS, він дуже простий, але красиві куточки (наприклад, з тінями, градієнтами, з якими-небудь складними малюнками) на ньому не зробиш:

Відео: 3D трикутник / Як намалювати 3D фігуру самому

Далі до звичайного блоку div можна застосувати клас triangle, в результаті даний блок стане стрілкою чорного кольору (# 000). Розміри можна регулювати через властивість border-width. Ось про цей спосіб багато з Вас навіть не чули, тому якщо стрілка простенька, то це найкращий спосіб.

інші способи

Час від часу я з ними зустрічаюся, але сам не використовую їх, оскільки жоден з них не є кросбраузерності. Всі вони використовують CSS3 і / або HTML5, які, на жаль, ще дуже погано підтримуються навіть сучасними браузерами, а про старі і говорити не доводиться. Тому рекомендую Вам використовувати на даний момент поки тільки перші 2 способу.