Перейти к содержанию
TextArray1.87.0
100% локально

Генератор CSS-треугольников и стрелок

Преобразуйте направление, размер и цвет в CSS-правило для треугольника или стрелки — без изображений.

Выходные данные
Связанные инструменты
Генератор CSS border-radiusновоеИнструменты разработчика
Генератор CSS clamp()Инструменты разработчика
Генератор CSS gridИнструменты разработчика
i18n ключевая разницаИнструменты разработчика
Конвертер TOML в JSONИнструменты разработчика
SQL в JSONИнструменты разработчика
Генератор CSS-треугольников и стрелок
Укажите направление, ширину, высоту и цвет — инструмент напишет CSS-правило для отрисовки фигуры: треугольник, указывающий вверх, вниз, влево или вправо, или угловой треугольник для значка ленты. Не нужно экспортировать изображение и добавлять лишнюю разметку: фигура — это чистый CSS, поэтому она идеально масштабируется и остаётся чёткой на экранах высокой плотности. Это основа для стрелок выпадающих меню, индикаторов аккордеонов, ленточных значков и указателей всплывающих подсказок.
Поддерживаются два метода. Border trick устанавливает противоположные границы нулевого бокса в прозрачный и окрашивает остальное — классический рецепт с самой широкой поддержкой браузеров. clip-path рисует фигуру на отмеренном боксе с использованием многоугольника, что проще читать в инструментах разработчика и анимировать. Переключайтесь между ними с помощью опции метода.
Включите «Использовать ::after pseudo-element» для правила, ограниченного ::after, абсолютно позиционированного вплотную к выбранной стороне или углу, готового добавить к элементу, у которого уже есть позиционирование relative — именно то, что нужно стрелке выпадающего меню или указателю подсказки, без лишнего HTML. Или включите «Речевой пузырь со стрелкой» — инструмент создаст два правила вместе: рамку скруглённого callout-бокса и хвост стрелки, прикреплённой к его краю, указывающей в выбранном направлении — форма за чат-бульбашкой или помощающим поповером.
Всё работает в вашем браузере: ничто, что вы настраиваете, никогда не отправляется. Скопируйте сгенерированный CSS, загрузите как .txt-файл или отправьте входу другого инструмента — скажем, генератора border-radius или clip-path — чтобы продолжить уточнение фигуры.
FAQ
Какой метод использовать, border или clip-path?
Border trick имеет самую широкую поддержку браузеров и является стандартным рецептом, который вы найдёте в большинстве CSS-учебников. clip-path создаёт реальный отмеренный бокс с видимой областью в инструментах разработчика, что облегчает отладку или анимацию — используйте его, если вам не нужна поддержка очень старых браузеров.
В чём разница между направлением к краю и направлением к углу?
Вверх, вниз, влево и вправо рисуют симметричный треугольник, указывающий в том направлении — фигура стрелки или индикатора прокрутки. Четыре угловых варианта рисуют прямоугольный треугольник, заполняющий один угол бокса — фигура ленточного значка или эффекта загнутого угла.
Добавляет ли опция pseudo-element правило позиционирования для родительского элемента?
Это позиционирует сам pseudo-element с position: absolute и правильными смещениями для выбранного направления. Родительский элемент все ещё нуждается в position: relative (или другом контексте позиционирования), чтобы это размещение было относительно него — добавьте это правило к селектору, к которому вы прикрепляете pseudo-element.
Можно ли использовать речевой пузырь как подсказку?
Да. Это создаёт рамку скруглённого бокса плюс прикреплённую стрелку, указывающую в выбранном направлении — именно форма, которая нужна всплывающей подсказке или помощающему поповеру. Отрегулируйте ширину, высоту и цвет в соответствии с вашим дизайном, затем дополнительно оформите бокс (фон, тень, цвет текста) в своей таблице стилей.
Отправляется ли что-то, что я печатаю или настраиваю, на сервер?
Нет. CSS генерируется полностью в вашем браузере из выбранных опций — ничего не отправляется на сервер.