CSS Zoo - Drawing Animals with Pure CSS

前端技术 Jun 20, 2021

CSS can draw Pikachu (for real)

Late night browsing CodePen, I saw a pure CSS Pikachu. No SVG, no Canvas, no images - just divs and CSS. My reaction: (shock) -> (confusion) -> (awe) -> (I'm not worthy)

Core weapons: border-radius (rounded corner god), box-shadow (shadow clone jutsu, can stack infinitely), ::before/::after (two free virtual children).

CSS triangle: width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red; - Border edges are diagonal. Set width/height to zero, keep one border. Bug or feature? Answer: legal hack from the ancestors.

Not production-ready for drawing Snoopy, but teaches you CSS deeply. Plus: drawing a cat for your significant other with pure CSS? Gets you a 'wow' - priceless.