Как создать иконку меню на 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.

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

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