- From: Ana Tudor via GitHub <sysbot+gh@w3.org>
- Date: Sun, 18 Feb 2024 15:00:47 +0000
- To: public-css-archive@w3.org
This is something I've found myself needing often, both when it comes to the SVG `<polygon>`/ `<polyline>` and when it comes to the CSS `polygon()`. Back in 2016, I even wrote a polyfill that did this for SVG `<polygon>`/ `<polyline>`. I intended to release it with an article explaining usage, how it works, but then both the article and the polyfill ended up growing and growing to cover every possible use case and... after 8 months of working on them, I just dropped the whole idea because those were 8 months of zero income and I decided to do something that would be worth it. This is a demo illustrating rounding regular polygons https://codepen.io/thebabydino/pen/MbxQmJ  The same idea was applied for rounding any `<polygon>`/ `<polyline>` https://codepen.io/thebabydino/pen/oWjVvd/bf097ea4fe45bfb6a8603484fa544692 When it comes to CSS, I've used a bunch of tactics. A very common one has been simply approximating the corner rounding with extra `polygon()` points, like this:  Here is a Sass mixin doing that (not sure if there isn't a newer one) https://codepen.io/thebabydino/pen/dymLJGo/a343189aa330aee3df89883a3215a91d This is an example of a demo using something of the kind https://codepen.io/thebabydino/pen/wvmRXeM/c5f191a40fae4feb587d9e3245d88889  In other instances, I've used a `filter` https://codepen.io/thebabydino/pen/wvQaOpz  In some particular cases, I've used CSS gradient masks for the effect https://codepen.io/thebabydino/pen/NWXbYwO - this is obviously very limited. -- GitHub Notification of comment by thebabydino Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9843#issuecomment-1951351003 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 18 February 2024 15:00:48 UTC