- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Wed, 24 Jan 2024 02:44:53 +0000
- To: public-css-archive@w3.org
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-shapes] Allow optional rounding parameter for `polygon()` == ## Motivation There is a wide variety of use cases where authors want to clip or mask an element based on a shape that is basically a simple polygon plus rounding. Right now this is exceedingly complicated to do by hand (since you'd need to use `path()`), and practically impossible to do with the same flexibility of units that `polygon()` supports. Tons of SO questions about this: - https://stackoverflow.com/questions/31765345/how-to-round-out-corners-when-using-css-clip-path - https://stackoverflow.com/questions/46417361/clip-path-polygon-with-curve-edges - https://stackoverflow.com/questions/62176115/clip-path-polygon-rounded-edge - [Breadcrumb shapes](https://stackoverflow.com/questions/70987632/rounded-corners-and-border-for-clip-path-at-the-same-time)  - [Speech bubbles where the pointer is not actually a separate element](https://stackoverflow.com/questions/46417361/clip-path-polygon-with-curve-edges):  - Why? E.g. [to crop a picture in that shape](https://stackoverflow.com/questions/73051914/clip-path-curved-edges-background-image-and-triangle)  - https://stackoverflow.com/questions/62453115/how-to-make-a-rounded-triangle-using-clip-path - [Rounded parallelogram picture cutout](https://stackoverflow.com/questions/72286820/how-to-create-a-rounded-corner-for-the-pictureimg-tag-in-clip-path-polygon-in)  - [Rounded tabs](https://stackoverflow.com/questions/76091116/rounded-clip-path-div)  - https://stackoverflow.com/questions/69634813/rounded-corner-on-clip-path-polygon - https://stackoverflow.com/questions/74221270/any-idea-how-i-can-make-radial-corners-on-a-clip-path-polygon - https://stackoverflow.com/questions/75429805/angled-edge-with-css-clip-path-and-rounded-corners - https://stackoverflow.com/questions/77521892/how-to-curve-a-custom-polygon-element-with-a-clip-path-property  - https://stackoverflow.com/questions/65045478/css-clip-path-polygon-rounded-borders - https://stackoverflow.com/questions/51616941/how-to-make-radial-corners-in-clip-path-look-clean - https://stackoverflow.com/questions/72539766/how-to-make-the-edge-of-a-button-round-with-clip-path - https://stackoverflow.com/questions/70865868/how-do-i-make-the-edges-of-the-hexagon-image-round - …and many others It also reminded me of my [W3Conf 2013](https://www.w3.org/conf/2013sf/) site design: <img width="463" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/2ba8f6f4-8107-4f52-8a9c-d8a2d26ada03"> ## The proposal A good chunk of use cases only requires a single radius for all corners, and I have yet to see a use case that requires different horizontal and vertical radii. Therefore, even something as simple as the following would go a long way. Change [`polygon()` grammar](https://drafts.csswg.org/css-shapes/#supported-basic-shapes) from: ``` <polygon()> = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# ) ``` to ``` <polygon()> = polygon( <'fill-rule'>? [<length> radius]?, [<length-percentage> <length-percentage>]# ) ``` To cover even more use cases we could also explore allowing `[<length> radius]?` on a per-point basis, to customize rounding for a specific point. This can ship later. ## Rendering There is always exactly one circle of a given radius that is tangential to each side adjacent to a corner < 180deg.  For corners >= 180deg, the other side can would be used:  Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9843 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 24 January 2024 02:44:56 UTC