Путь задачи / от ввода к результату
Как сделать треугольник на CSS
- 01
Выберите направление
В поле «Направление» выберите «Вверх», «Вправо», «Вниз» или «Влево». Предпросмотр обновляется мгновенно: приём окрашивает одну рамку, а соседние оставляет прозрачными. Рабочая область начинается с треугольника, направленного вверх.
- 02
Задайте размер
Настройте «Ширину основания» и «Высоту треугольника» от 8 до 180 px с шагом 1 px. Для направлений вверх и вниз ширина задаёт основание, а высота — расстояние до вершины. Для направлений влево и вправо высота задаёт вертикальное основание, а ширина — горизонтальный вылет. По умолчанию фигура занимает 72 px по горизонтали и 64 px по вертикали.
- 03
Выберите цвет заливки
Установите «Цвет заливки» в любое шестизначное шестнадцатеричное значение — по умолчанию #0f4cff. Живой предпросмотр и генерируемое объявление border-color всегда синхронизированы, поэтому копируется ровно то, что вы видите.
- 04
Проверьте статус предпросмотра
Живой предпросмотр перерисовывается при каждом изменении, а значок статуса показывает CSS ВАЛИДЕН, когда все значения в диапазоне. Значение вне диапазона меняет его на ПРОВЕРЬТЕ ЗНАЧЕНИЯ и блокирует копирование и скачивание, пока вы не исправите подсвеченный элемент.
- 05
Попробуйте пример
«Загрузить пример» создаёт треугольник вправо с горизонтальным вылетом 104 px, вертикальным основанием 86 px и заливкой #ffd11a. «Сбросить» возвращает значения по умолчанию.
- 06
Скопируйте или скачайте CSS
Нажмите «Копировать CSS», чтобы скопировать правило .triangle в буфер обмена, или «Скачать .css», чтобы сохранить его как toolars-triangle.css. Правило задаёт нулевые ширину и высоту и объявляет все четыре рамки — готово для вставки в любую таблицу стилей.