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

Here's a very rough proposal for a `border-shape` syntax, with the intent of having `border-shape` encompass `corner-shape` and the desire to have user-defined element shapes.

```
<corner-shape> = [round | bevel | scoop | notch]{1,4}
<border-line-style> = dotted | dashed | solid
<border-radius> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

border-shape: (<corner-shape> <border-radius>?)
              || (<basic-shape> <line-width> <border-line-style>? <geometry-box>?)
              || (<basic-shape> <geometry-box>? <basic-shape> <geometry-box>?)
```

If the `<corner-shape>` version is specified, this can be used to specify the corner treatment for each corner, and optionally border radii that override `border-radius` values. The appearance of corner shapes is influenced by border widths, as with border-radius currently (note this might be non-trivial for some corner shapes).

If the single `<basic-shape>` variant is specified, this provides a path, with the given stroke width, which is rendered instead of the border[1]. The path is resolved relative to the given `<geometry-box>`, defaulting to `border-box`. Colors are taken from the `border-color` property (different colors on each side are rendered with corner joins, as they are now with `border-radius`). The border is rendered by stroking the path, centered on the path (insetting an arbitrary path involves non-trivial compute, and masking to get an inset path doesn't work for paths with loops). Dotted and dashed paths are supported. (Double borders could also be supported by masking and rendering the path a second time for the center slot with clearing.) A future property could allow control over the dash origin.

If the double `<basic-shape>` variant is specified, the first shape is used as the outside of the border shape, and the second shape as the inside. The border fill is painted in the space between these two paths. Each path is resolved relative to the given `<geometry-box>`.

`border-clip: border-area` fill the border shape.

Box shadows follow the outer and inner border shapes as appropriate.

`border-shape` does not affect the box geometry, which is still computed using the widths specified via `border-width`. Areas of the shape that project outside the border-box are considered as ink overflow. Areas of the inner shape that project outside of the border-box will be considered part of the background area, so filled with backgrounds (we probably need a new value for `background-clip` to allow for this).

`border-shape` does not affect the flow of content inside the box.

The clipping of content behaves as it does for `border-radius`: the inside shape of the border clips content, if `overflow` is non-visible.

The shape variants of `border-shape` have no effect in cases where it's necessary to clip to the content box (replaced elements?). Currently border-radius does affect content box clipping in some cases, but it's not possible to easily inset arbitrary shapes to compute content shape clipping.

[1] _Maybe the rectangular border also renders, and the author has to set the color to `transparent` to hide it? The shape would then be a way to just extend the background._

Here's a screenshot for some in-progress experiments in WebKit:

![border-shape](https://github.com/user-attachments/assets/a94e73f8-1538-4730-9458-f7651857217d)
which is a rendering of
```
            padding: 40px;
            overflow: hidden;
            border: 60px solid transparent;
            box-shadow: 0 0 20px black, 0 0 20px black inset;
            border-shape:
                shape(from 0% 0%,
                    hline to 100%,
                    vline to 75%,
                    smooth by -8.295% 0% using -3.7% -2.2%,
                    smooth by -8.5% 12.8% using -4.1% 10.7%,
                    smooth by -7.9% -3.2% using -3.7% -5.2%,
                    smooth by -7.3% 9.3% using -2.7% 7.1%,
                    smooth by -9.0% 0% using -4.1% -2.3%,
                    smooth to 0.82% 100% using 0.82% 100%,
                    close) border-box,
                shape(from 10% 10%,
                    hline to 90%,
                    vline to 64.621%,
                    smooth by -8.295% 0% using -3.7% -2.2%,
                    smooth by -8.5% 12.8% using -4.1% 10.7%,
                    smooth by -7.9% -3.2% using -3.7% -5.2%,
                    smooth by -7.3% 9.3% using -2.7% 7.1%,
                    smooth by -9.0% 0% using -4.1% -2.3%,
                    smooth to 10% 90% using 10% 90%,
                    close) border-box;            
            background-image: linear-gradient(to bottom right, orange, blue, green), none;
            background-origin: border-box;
            background-clip: border-area, border-box;
```


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


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

Received on Tuesday, 27 August 2024 03:48:28 UTC