Using the clip-path property
Have you seen those beautiful side slide-in menus that have interesting shapes for example circular, triangular or even various forms of polygons?
Well, I can bet that most of them have been created using the clip-path CSS property and that’s what we’ll be looking at today.
Unfortunately, as per MDN here the support for this particular property and its various use-cases such as animations, use on paths and HTML elements is not yet very robust, but that should never stop anyone with experimenting. I do as a result recommend using them with various fall-backs in production to ensure a favourable user experience in case your page is opened on a browser that does not support the property fully.
Nonetheless, in order to achieve the aesthetically pleasing circularly edged slide-in menu. All you need to manipulate is the menu by setting its position as absolute relative to the body element and set its clip-path property to circle with an appropriately-sized radius which is the parameter value you pass to circle.
clip-path:circle(40px);
At this point,you can use any of the other values available aside from circle such as ,polygon or path to achieve other interesting shapes. But to achieve the slide-in animation you can simply use transform to translate on the X axis till the menu is out of view and you can have a button to toggle it back and forth with a transition-duration to smooth the movement.
To see a working version of this , checkout the codepen below and keep experimenting!
