Re: [csswg-drafts] [css-shapes] limitations of css shapes (#8691)

@danwilson would really be the one to ask if he feels shape() covers some of the workarounds in the article better.

From my perspective it looks like it might make the workarounds easier to do but seems like it skirts at least 2 of the direct issues:

> 2. An ellipse can only be vertical or horizontal (no diagonal ellipses or rotations)

Maybe add a rotation parameter to the ellipse function (and other functions where it makes sense)? With a similar `from` rotation syntax to conic-gradient gradient? Default rotation origin point would be the `at` value? Maybe include ability to change the rotation origin?

```css
clip-path: ellipse(30px 10px from 45deg at 50% 50%);
```

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

> 1. You can only use one shape function (a list of clip path functions to be combined is not supported by the property)

The way i'd like to see this dealt with, if possible, is compositing multiple simple shape functions the same way we can composite multiple images with `mask-composite`. So a "shape-composite" property maybe? with Add, subtract, intersect, exclude as values.

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite

This would more closely mimic the way that most designers I've worked with create shapes in Illustrator/Inkscape.

```css
clip-path: inset(14px 0 round 8px), inset(0 14px round 8px);
shape-composite: add;

/* or maybe */

clip-path: inset(14px 0 round 8px), inset(0 14px round 8px) add;
```

Would create:

![Image](https://github.com/user-attachments/assets/3e0db0e0-5b0a-49ad-98df-d9b0bbc994f5)

The snow person example from the article would possibly be some like this:

```css
clip-path: circle(15% at 50% 2rem) circle(25% at 50% 6rem) add;

/* or maybe */

clip-path: circle(15% at 50% 2rem) circle(25% at 50% 6rem);
shape-composite: add;
```

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


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

Received on Thursday, 30 January 2025 18:42:48 UTC