- From: jsnkuhn via GitHub <sysbot+gh@w3.org>
- Date: Mon, 12 Jun 2023 12:01:37 +0000
- To: public-css-archive@w3.org
jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-shapes] add additional optional shapes options to inset() etc ==
https://drafts.csswg.org/css-shapes/#supported-basic-shapes
Currently inset(), xywh() and rect() allow an optional `border-radius` like syntax for rounding the corners of the rectangle. I'm proposing adding the other `corner-shape` options from https://drafts.csswg.org/css-backgrounds-4/#corner-shaping and their combination to this.
```css
clip-path: inset(0 round 16px);
clip-path: inset(0 angle 16px);
clip-path: inset(0 round angle 16px);
clip-path: inset(0 round angle 16px / 8px);
```
A common pattern to see for non-bordered angled corners right now is this:
```css
clip-path:
polygon(
16px 0,
calc(100% - 16px) 0,
100% 16px,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
16px 100%,
0 calc(100% - 16px),
0 16px);
```
Which would get replaced with this:
```css
clip-path: inset(0 angle 16px);
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8946 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 12 June 2023 12:01:39 UTC