Re: [csswg-drafts] [css-shapes-2][css-borders-4] 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.

A little more detail on our motivation:

It's reasonable to view border-shape as providing three levels of increasing complexity & power for specifying borders: the border-* properties define a rounded rect path that gets stroked; the single-path version defines an *arbitrary* path that gets stroked; the two-path version defines an *Iarbitrary shape* that gets filled. Generally, we want increasing complexity to track with increased power, so authors that want only a small deviation from the built-in stuff can just go up a small amount in complexity, rather than having to jump all the way to some "primitive" version that's super hard to work with (but super powerful).

So, the "rounded-rect" borders can have up to four distinct widths and colors, one for each horizontal/vertical side, with the rounded corners smoothly interpolating between the values. Our proposal is, we think, both the simplest and most natural way to reproduce this ability in the single-path syntax, with the path direction dictating which of the four border-width/color values to draw from (or which two to interpolate between, and by how much).

If you use the single-path to produce a rounded rect, or any reasonably close variation on that, you'll get a result essentially identical to what is defined for the border-* properties today. (The way the corners are interpolated will be slightly different, which I think is unavoidable - I don't think the corner interpolation rules can be applied to an arbitrary path without an explosion of complexity. But I could be wrong about that.)

If you do *other* shapes, you'll still get a *reasonable* result, with decent control knobs to twiddle. If this *still* isn't enough, the two-path syntax still exists, but we think this should provide enough power to the single-path syntax that you'll often be satisfied.

-------------

We could also provide a further intermediate syntax, where you can provide the colors and widths along the path *explicitly*, tied to the path distance; similar to defining gradient stops. We're already using that syntax in gradients and in linear(), and will likely use it in more places (cubic splines for more easing?), so it is a familiar pattern to work with. This is more complex than needed for simple shapes, but is still vastly less complicated than the two-path syntax.

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


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

Received on Tuesday, 1 October 2024 18:19:46 UTC