Re: [csswg-drafts] [css-background-4] Replace `corner-shape` with property that just does angled corners + rounding (#8591)

This seems like a lot of added complexity for a fairly niche style.

Clip-path with `polygon()` already supports basic bevels so long as you don't mind actually clipping & don't need a border style.

Then, the missing feature would be to create a border that follows the clipped shape, or to create that shape without actually clipping child overflow. **So, my suggestion would be to create a `border-shape` property that takes a [`<basic-shape>`](https://w3c.github.io/csswg-drafts/css-shapes-1/#typedef-basic-shape) value, the same as clip-path, but it only clips the backgrounds and then strokes the shape in the border width & style.**

(Complication: *which* border-width & style? The shape wouldn't necessarily have 4 sides, but the browser would still need to handle a mix of border styles! Maybe: divide up the border box into triangles created by diagonal lines and stroke the sections of the border-shape that fall in each triangle according to that border style.)

For rounding corners after bevelling, I'd be happy to see a single corner-radius parameter added to the polygon function, for all of the places where the function is used: clip-path, shape outside, offset-path, maybe one day SVG. Or maybe two corner-radius parameters, one for convex corners and one for concave.

(Long term, I'd also like to get an accepted syntax for combining percentages, unit-lengths, and calc/math function with SVG path notation, so you could get all sorts of shapes! But polygons with slightly rounded corners is a nice, simple solution to many use cases.)

Benefits of replacing `corner-shape` with a property that uses `<basic-shape>` values:

- Many styles, only 1 new property

- You could create bevels, notches, arrows, or angular speech bubbles, simply by defining the polygon() accordingly.

- By adding corner-rounding to the `polygon()` function, instead of as a new property, it can be used in all properties that use basic shape functions.

- You're not overloading `border-radius`, so it can be adjusted for better fallback.

- Whenever a path-like shape syntax is chosen for combining curved path segments with responsive units, then you could also do scooped corners, more elegant speech bubbles, thought clouds, and more. (In the meantime, you could do absolutely-sized path shapes. Which might be useful for fancy icon buttons? I don't know. Non-responsive `path()` isn't very useful in CSS currently.)

Downside:

- It's more complex for a simple case like a bevelled corner. (You need to build up the 8-point polygon with a bunch of calc() functions.)  But if there is still a demand for a simplified notch notation, it could maybe be defined as a new basic shape function which then gets reused in the other properties that use basic shapes.


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


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

Received on Wednesday, 15 March 2023 22:22:02 UTC