Как сделать иконку "Гамбургер" (три полоски) на CSS

Обновлено: 2023-07-04 в 18:26

Актуально на 2025 год

Просмотры: 186

В этой короткой заметке покажу, как сделать иконку «Гамбургер» на CSS. Три параллельные горизонтальные полоски, или как их еще называют «Гамбургер», обычно используется для обозначения меню на сайте.

На одном из сайтов сначала я использовал изображение для обозначения меню. Но однажды мне пришла идея заменить картинку на HTML и CSS код.

Сделать это достаточно просто. Напишем HTML-каркас и немного стилизуем его.

<div class="red-square-cat">
  <div class="lines"></div>
</div>

</div>

Добавил стили. Сначала описал подложку, а затем и полоски.

.red-square-cat {
  position: relative;
  width: 46px;
  height: 46px;
  background-color: #DC5954;
}

.lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 12px double #fff;
  border-top: 4px solid #fff;
  content: "";
  height: 4px;
  width: 30px;
  box-sizing: unset;
  display: inline-block;
  vertical-align: middle;
}

.red-square-cat {

position: relative;

width: 46px;

height: 46px;

background-color: #DC5954;

}

.lines {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-bottom: 12px double #fff;

border-top: 4px solid #fff;

content: "";

height: 4px;

width: 30px;

box-sizing: unset;

display: inline-block;

vertical-align: middle;

}

Посмотрите демонстрацию кода.

Всем WEB!

Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.

Оцените статью:

Рейтинг: 0.0 (Голосов: 0)

Как сделать иконку «Гамбургер» на CSS

Об авторе: Hobo

Добавить комментарий Отменить ответ

Почитайте похожие материалы

Защита от плохих ботов: 2 способа

Пропали iframe с видео VK в WordPress? Враг не дремлет!

Об авторе: Hobo

Добавить комментарий Отменить ответ