Как сделать треугольник в css

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Треугольник в CSS:
В файле HTML напишем следующий код:

<div id="triangle"></div>

В файле CSS напишем следующий код:

#triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

Границы одинаковой ширины прилегают друг к другу под углом 45 градусов.
Затем делаем высоту и ширину 0, прозрачные боковые границы, а за счёт пересечения границ и свойства solid в итоге получается нарисовать треугольник.
Пример в CodePen:
Треугольник в CSS

3 года назад

Виктория Аблаева

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы