Как создать иконку меню на 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 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь