search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.36k stars 641 forks source link

[css-anchor-position] Drawing irregular shapes between two items #10361

Open JacobDB opened 1 month ago

JacobDB commented 1 month ago

When anchoring between two items, it would be very useful to be able to draw irregular shapes. For example, when drawing an invisible triangle to improve hover area, such as in the mockup below.

image

https://www.mayank.co/blog/hover-triangles

https://www.w3.org/TR/css-anchor-position-1/

kizu commented 1 month ago

This could be a good use case for https://github.com/w3c/csswg-drafts/issues/8586, where allowing us to use anchor() and anchor-size() in all properties could allow us to calculate the polygon() necessary for the clip-path().

With some hacks, I'm pretty sure the hover triangles could be possible with what we have already in anchor positioning, but having an easier way of doing it could be very useful.