SVG Hamburger Menu - Thủ thuật CSS

Anonim

Ba sọc phải là một thứ dễ vẽ như vậy. Đây là một loạt các cách khác nhau để thực hiện trên web. Điều đó nói rằng, SVG chắc chắn là cách tốt nhất để xử lý nó. Thực đơn bánh hamburger đơn giản đến mức chúng ta có thể vẽ bằng tay trong SVG.

Ba hình chữ nhật, phân bố đều:

 

Hãy thử với những con số đó để có được kích thước và kiểu dáng bạn thích.

Điều gì đó tuyệt vời mà bạn có thể chưa biết? SVG có các góc tròn, giống như CSS có border-radius! Nó có dạng rxthuộc tính. Kiểm tra nó ra:

Điều đó có thể hoạt động tốt hơn cho thiết kế của bạn nếu thiết kế của bạn mềm mại hơn và sử dụng những thứ tròn trịa.