- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Mon, 24 Jan 2022 16:43:29 +0000
- To: public-css-archive@w3.org
It seems to me that almost all of these examples are bevel corners and various types of polygons/parallelograms/trapezoids etc. None of them are using `corner-shape: notch | scoop`. Furthermore, I feel that using `corner-shape` to create polygons, triangles etc is a bit of a hack. I wonder if what we actually need is something like `element-shape: <shape>`, and then borders, shadows etc would follow that shape. This allows creating "bevel" corners like this: ```css --corner-size: 10px; element-shape: polygon( var(--corner-size) 0, calc(100% - var(--corner-size)) 0, /* top */ 100% var(--corner-size), 100% calc(100% - var(--corner-size)), /* right */ calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, /* bottom */ 0 calc(100% - var(--corner-size)) ); ``` …which is admittedly a lot more involved than `corner-shape: bevel;` but also allows creating arbitrary shapes, even SVG paths. From what I remember the tricky bit of implementing/specifying all of these is border geometry, especially when top, right, bottom, left borders all have different thicknesses and/or colors. Given that the use cases that actually require a non-uniform border AND a custom shape are practically nil, I wonder if there's an easy way to get this out of the way, even if the visual result in these rare cases is suboptimal. @fantasai would love your input. -- GitHub Notification of comment by LeaVerou Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6980#issuecomment-1020301916 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 24 January 2022 16:43:30 UTC