Re: [csswg-drafts] [css-borders-4] Interaction of single-path `border-shape` with non-uniform `border-width` (#11662)

I've experimented with trying to create some options using canvas, and created this partially working demo:
https://noamr.github.io/border-shape-testbed/index.html

I think this model works pretty well for NONZERO shapes.
It's inspired by the model suggested before by @LeaVerou and @tabatkins, but adjusted to not having to rely on a point-after-point computation of stroke width and interpolating a bezier's stroke, which can be too computationally expensive.

1. Divide the path into closed subpaths
2. divide each closed subpath into segments
3. If counter-clockwise, reverse
4. For each subpath:
    4.1. Choose the stroke width and color by which border is to the left of the vector created by the segment.
           e.g. a segment that points to the right would receive the top border.
    4.2. Expand each subpath by the chosen stroke width, as if it was a line, creating an inner and outer subpath
5. Trim/expand the outer and inner subpath start/end points to intersect with its respective adjoining segments
6. for each segment, create a path between the join points and the stroke boundary
7. Fill that path with the chosen color

@fserb @tabatkins @nt1m @fantasai @smfr @LeaVerou  WDYT?


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


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

Received on Monday, 10 February 2025 10:44:09 UTC