CSS clip path animation inspired on @QingshanYu https://www.behance.net/gallery/16232721/Animated-Icons-Exercise
Basic shape masking with no SVG markup. Single element. One line of CSS. Chrome only.
CSS 2.1 specifies the clip property, which you can use to reference an SVG. This uses basic CSS shapes instead, introduced in the W3 CSS Shapes working draft.
Creating responsive comic panels with dynamism using CSS clip-path, including SVG fallback. Full explanatory article on my site. Photograph by @mopictures, licensed under Creative Commons.
Using :before and :after as a CSS clip path alternative.
In response to the question asked here : https://hashnode.com/post/alternative-to-css-clip-path-cikqx3y2e01of6v53z89g2z1v
It's not really possible (as far as I know) to make a border around an element with a clip path. This method uses an inside and outside element, the background of the outside one being the border.
Note how the top-section now always keeps an aspect-ratio of 4:1 This helps with keeping the caret in shape with the exact same angle, but also helps with keeping the CSS DRY (without having to change this css clip-path polygon in media-queries a few times over, using “magical numbers”). This is done in CSS with the so-called padding-bottom trick.
Material Design inspired hamburger menu created using CSS Clip Paths. Literally only works in Chrome /sadface.
single element animation icon~
Texturized hexagon with a proper cursor collision. Done with child & pseudo elements, background inheritance, and 2D transforms.
Need to know how to enable it? Go here.