Skip to content

[css-shapes] Allow optional rounding parameter for polygon() #9843

Open
@LeaVerou

Description

@LeaVerou

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:

It also reminded me of my W3Conf 2013 site design:
image

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 from:

<polygon()> = polygon(
  <'fill-rule'>? ,
  [<length-percentage> <length-percentage>]#
)

to

<polygon()> = polygon(
  <'fill-rule'>? [round <length>]?,
  [<length-percentage> <length-percentage>]#
)

To cover even more use cases we could also explore allowing [round <length>]? 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.

image

For corners >= 180deg, the other side would be used:

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Wednesday morning

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions