Re: [csswg-drafts] [css-backgrounds] background-clip: border-area (#9456)

• From: Temani Afif via GitHub <sysbot+gh@w3.org>
• Date: Wed, 11 Oct 2023 22:51:30 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-1758653650-1697064689-sysbot+gh@w3.org>

One use case would be the classic border-only pie chart where we can rely on conic-gradient() but we need to mask the inside part: https://codepen.io/t_afif/pen/XWaPXZO

![Pie Chart CSS only](https://github.com/w3c/csswg-drafts/assets/14073250/c817672d-8e04-4f1f-9037-d6350b389fb5)

With the above, the code can be as simple as:

```
.pie {
  --p: 20%; /* the progress*/
  --c: red;
  border: 10px solid #0000;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0) border-area
}
```

(for the rounded part, two extra radial-gradient will do the job and no need to clip them)



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


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

Received on Wednesday, 11 October 2023 22:51:32 UTC