<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как сделать треугольники на чистом CSS.

Как сделать треугольники на чистом CSS.

Всем привет! Сегодня мы рассмотрим, как сделать треугольники на чистом CSS.

Несмотря на то, что сделать треугольники на чистом CSS довольно легко, многие люди не понимают, как же они работают. Сегодня я постараюсь подробным образом это объяснить.

Итак, сначала напишем базовую разметку и стили.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Теперь добавим стилей.

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-top: 7px solid red;
  border-left: 7px solid green;
  border-right: 7px solid blue;
  border-bottom: 7px solid yellow;
}

Итак, теперь откройте страницу в браузере и посмотрите, что получилось.

Вы увидите, что у нас есть блок, который прозрачен внутри, а вокруг него рамки разного цвета. Обратите внимание на углы, которые образуются на сходе этих рамок.

Теперь давайте уберем ширину и высоту

.box {
  width: 0;
  height: 0;
}

Теперь вы можете видеть, что у нас образовались 4 треугольника. Если нам нужен только верхний, то остальные рамки надо сделать прозрачными, чтобы их не было видно.

.box {
  border-top: 7px solid red;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

Вот и всё! Теперь, меняя значения толщины рамок, вы можете добиться той формы треугольника, которая нужна вам.

Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

GreenCape GreenCape 05.05.2015 22:52:20

"Итак, теперь откройте страницу в браузере и посмотрите, что получилось." ............................................................. Ничего не получилось. Чистая страница в браузере. Причём и при копировании, и при переписывании результат одинаковый. Открывал разными браузерами- всё равно чистая. Или у меня руки кривые, или 'надо что-то в консерватории подправить'.

Ответить

php_programmer php_programmer 06.05.2015 17:57:36

У Вас первый вариант. Можете не благодарить.

Ответить

Tisani Tisani 29.02.2016 16:18:15

Когда подключаем стили, нужно кое что сделать) Проверка на внимательность, у меня все получилось. Подсказка - Link и прочие))

Ответить

paschazverev paschazverev 07.05.2015 18:01:33

Благодарю :-)

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.