Генератор CSS-трикутників та стрілок
Перетворіть напрямок, розмір і колір на CSS-правило для трикутника чи стрілки — без зображень.
Генератор CSS-трикутників та стрілок
Вкажіть напрямок, ширину, висоту та колір — інструмент напише CSS-правило для малювання фігури: трикутник, що вказує вгору, вниз, вліво чи вправо, або кутовий трикутник для значка стрічки. Не потрібно експортувати зображення та додавати зайву розмітку: фігура — це чистий CSS, тому вона ідеально масштабується та залишається чіткою на екранах високої щільності. Це основа для стрілок спадних меню, індикаторів акордеонів, стрічкових значків і вказівників підказок.
Підтримуються два методи. Border trick встановлює протилежні межі нульового боксу прозорими та фарбує решту — класичний рецепт з найширшою підтримкою браузерів. clip-path малює фігуру на вимірюваному боксі за допомогою многокутника, що легше читати в інструментах розробника та анімувати. Перемикайтесь між ними за допомогою опції методу.
Вімкніть «Використовувати ::after pseudo-element» для правила, обмеженого ::after, абсолютно позиціонованого впритул до вибраної сторони або кута, готового додати до елемента, який уже має позиціювання relative — саме те, що потрібно стрілці спадного меню або вказівнику підказки, без зайвого HTML. Або вімкніть «Мовна бульбашка зі стрілкою» — інструмент створить два правила разом: межу округленого callout-боксу та хвіст стрілки, прикріпленої до його краю, що вказує в обраному напрямку — форма за чат-бульбашкою або допоміжним поповером.
Усе працює у вашому браузері: ніщо, що ви налаштовуєте, ніколи не надсилається. Скопіюйте згенерований CSS, завантажте як .txt-файл або відправте на вхід іншого інструменту — скажімо, генератора border-radius або clip-path — щоб продовжити уточнення фігури.