Как создать иконку меню на CSS

Создаем иконку меню из 1 дива. Без псевдоклассов, before и after.

Как создать иконку меню из трех полосок на CSS

Как правило, эта иконка создается несколькими способами. В том числе, при помощи подключения замечательного шрифта FontAwesome (fas fa-bars). Но давайте попробуем сделать это на чистом CSS. Для начала создадим наш HTML элемент:

< div id="lines" ></ div >

CSS:

#lines {
  border-bottom: 12px double black;
  border-top: 4px solid black;
  content: "";
  height: 4px;
  width: 30px;
  box-sizing: unset;
  display: inline-block;
  vertical-align: middle;
}

Что же получится в результате:

Вот и всё, мы научились делать иконку меню. При наведении (ховере) вы можете менять цвет иконки, выставив border-color.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru

- Создание сайта на 1С-Битрикс;
- Доработки и правки на рабочем проекте;
- Адаптивная вёрстка и натяжка на Битрикс;
- Выгрузка и Загрузка товаров на сайт;
- Парсинг;
- Интеграции со сторонними сервисами по API;
- Многоязычные версии сайтов и многое другое.

Бесплатно проведу технический аудит вашего сайта, а также дам рекомендации по продвижению проекта. Отвечу на любые вопросы. Пишите :)
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *