You’ll notice in the markup that it’s crazy div town, but sadly can’t animate :after elements like I was planning to do.
Anyone got any ideas on how I might be able to trim down the markup or indeed, any better ideas how to implement this idea to make it practical to use in place of an image of our logo on our upcoming new site?
Sadly, you won’t be able to squeeze the markup if you’re planning to do it the CSS way. To draw things with CSS, we have a few ways:
– **box-shadows**: very powerful, but you can’t be rotated
– **pseudo-elements**: very powerful but restricted number and can’t be animated
– **gradients**: very powerful especially radials but can’t be animated
– **webkit-box-reflect**: pretty limited usage and can’t be rotated
– **markup crowding**: the way you went