Re: [csswg-drafts] [css-shapes-2] Add a way to change an element's shape (#6997)

So over the break @tabatkins and I came up with an algorithm for how to not only draw the border on a single shape, but even respect the different top, right, bottom, left border widths.

Conceptually, the general idea was: for each point along the path, you find the tangent, and draw a vector perpendicular to the tangent with a length calculated as follows:
- If the angle is a multiple of 90deg, then it directly maps to one of the four border widths.
- Otherwise, you compute its proximity to the two adjacent angles that are multiples of 90deg and do a weighed average of the two border widths.

I don’t have access to our sketches as I write this, but it seemed to us that this would produce a very nice result for many common cases, and a not-terrible result for edge cases.

Ideally, the single shape syntax should allow specifying either the border edge (and draw the border on the inside of it) or the padding edge (and draw the border on the outside of it). We'd still need to decide how to do line joins and miter limits.

@svgeesus @fserb we'd love your feedback!

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6997#issuecomment-2379888438 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 27 September 2024 19:03:07 UTC