В те далекие времена, когда CSS было не так развито, о такой вещи как медиа запросы или адаптивная версия сайта речи не и шло, не говоря уже о иконке мобильного меню.
Как не используя картинку, можно создать значок мобильного меню для сайта.
Наш HTML:
<div id="mobile_nav_icon"></div>
Пишем CSS для иконки мобильного меню:
#mobile_nav_icon { border-bottom: 10px double #888; border-top: 3px solid #888; cursor: pointer; float: left; height: 4px; margin-left: 5px; margin-top: 5px; padding-top: 4px; transition: all 0.2s ease 0s; width: 25px; }
Мы используем 2 свойства border, причем одно из них в значении double.
Теперь вы знаете как при помощи стилей очень просто можно сделать иконку меню для мобильной версии вашего сайта не прибегая к изображениям.
Пример того, как будет выглядеть иконка мобильного меню на чистом CSS можно увидеть чуть ниже: