22 ms·
You'd want to use clip-path which isn't supported that well yet, but it does let you define non-rectangular hover regions. But there is still a problems with th
by andrewingram 8y ago
You'd want to use clip-path which isn't supported that well yet, but it does let you define non-rectangular hover regions. But there is still a problems with this approach.
It's subtle, but if you look at the Bloomberg implementation, if you move the pointer to the left at any point, it abandons the behaviour and highlights the menu item below the pointer -- even if the pointer is still inside the conceptual triangle region.
So I think you can get pretty close to a CSS-only solution in modern browsers, but the the small touches that make it feel great would still probably require writing some JavaScript.
- kroltan 8y agoYou can also use a very acute 3D perspective transform to create almost any quadrilateral shape, so the support can be a bunch better.
- wyattpeak 8y agoWhat the parent is describing isn't a shape at all, though. The behaviour is different depending on the direction the cursor is moving.
- andrewingram 8y agoBuilt a quick demo that shows that (a) you can mostly do it with HTML/CSS and (b) the experience isn't great: https://codepen.io/andy-ingram/pen/MXPqZN?editors=1100 https://codepen.io/andy-ingram/pen/MXPqZN?editors=1100
- dosy 8y agoThat is cool.
- deleted 8y ago[deleted]