SVG Гамбургер-меню - CSS-хитрости

Anonim

Три полосы должно быть так легко нарисовать. Вот несколько способов сделать это в Интернете. Тем не менее, SVG - определенно лучший способ справиться с этим. Гамбургер-меню настолько простое, что мы можем нарисовать его вручную в SVG.

Три равномерно распределенных прямоугольника:

 

Не стесняйтесь возиться с этими числами, чтобы получить нужный размер и стиль.

Что-то интересное, чего вы могли не знать? У SVG закругленные углы, как и в CSS border-radius! Он представлен в виде rxатрибута. Проверить это:

Это может лучше подойти для вашего дизайна, если ваш дизайн будет мягче и будет использовать закругленные элементы.