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

• From: Temani Afif via GitHub <sysbot+gh@w3.org>
• Date: Wed, 19 Jun 2024 07:41:53 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2177982799-1718782911-sysbot+gh@w3.org>

We can also rely on background-origin. By default it's padding-box so we add that "half" as a border and the repetition will do the job.

```css
div {
 --s: 1em;
 
 width: 12em;
 aspect-ratio: 1;
 border: solid transparent;
 border-width: 0 calc(.5*var(--s)) calc(.5*var(--s)) 0;
 padding: calc(1.5*var(--s)) var(--s) var(--s) calc(1.5*var(--s));
 background: 
  repeating-conic-gradient(
    #000 0% 25%, 
    #0000 0% 50%) 0 0/ var(--s) var(--s) space;
 mask: 
  linear-gradient(red 0 0) exclude, 
  linear-gradient(red 0 0) content-box
}
```

Demo: https://codepen.io/t_afif/pen/OJYQvev

![image](https://github.com/w3c/csswg-drafts/assets/14073250/0852f2f7-1f04-47ae-b7f7-ed0f01f5f14c)


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


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

Received on Wednesday, 19 June 2024 07:41:54 UTC