Генератор CSS-треугольников
Создавайте CSS-текст для треугольников на основе границ, выбирая направление и размер.
Запустить инструмент
Генератор CSS-треугольников создает текст CSS для геометрических фигур на основе границ элемента. Укажите направление и размер, затем используйте полученный фрагмент в своем проекте. Доступны направления вверх, вниз, влево и вправо, а также четыре диагональных варианта: `top-left`, `top-right`, `bottom-left` и `bottom-right`. Если направление не указано, используется `up`; размер по умолчанию равен `20`. Инструмент рассчитывает значения четырех границ в пикселях и применяет прозрачные цвета границ. Важно: введенный параметр `color` не меняет цвет в итоговом CSS, поэтому цвет фигуры потребуется настроить отдельно.
Инструкция
- Выберите направление треугольника или оставьте значение `up` по умолчанию.
- Укажите размер, например `20` или `24`. Значение участвует в расчете ширины границ в пикселях.
- При необходимости заполните поле цвета, учитывая, что оно не изменяет цвета границ в результате.
- Запустите генерацию и скопируйте полученный CSS-текст в свой файл стилей.
- Проверьте результат в проекте и при необходимости измените параметры направления и размера.
Примеры
- Например, выберите направление `right` и размер `24`, чтобы получить CSS-текст для треугольника, направленного вправо.
- Оставьте параметры по умолчанию, чтобы сгенерировать CSS-текст для треугольника с направлением `up` и размером `20`.
Частые вопросы
Какой CSS создает этот инструмент?
Инструмент генерирует текст CSS для треугольников на основе границ: ширина и высота элемента задаются равными нулю, а форма создается четырьмя границами.
Какие направления доступны?
Можно указать направления `up`, `down`, `left`, `right`, `top-left`, `top-right`, `bottom-left` и `bottom-right`. Направление по умолчанию: `up`.
Как работает размер?
Параметр `size` участвует в расчете ширины границ и преобразуется в значения в пикселях. По умолчанию используется значение `20`.
Меняет ли параметр color цвет треугольника?
Параметр `color` принимается интерфейсом, но не влияет на сгенерированный CSS: цвета границ в результате задаются как прозрачные.