Web

Facebook Twitter

Web Design Blog | Web Design Standards | Viget Inspire. One of the neatest things about CSS Transforms is that they change the hit area of an element to whatever transformed value we set.

Web Design Blog | Web Design Standards | Viget Inspire

So, if we rotate an element, the hit area for that element doesn’t stay a box in the defined X and Y plane; it changes to the transformed shape. CSS Transformed Hit Box With that in mind, when I was handed a design comp with a skewed design element and links with angled edges within it, I realized for great justice it was achievable by skewing an element and applying overflow: hidden to the container. The markup for this demo is really simple: <div class="container"> <div class="inner"> <ul> <li> <a href="#">Something Awesome</a> </li> <li> <a href="#">Something Awesome</a> </li> <li> <a href="#">Something Awesome</a> </li> </ul> </div></div>

Css

Javascript. jQuery.