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

• From: Ana Tudor via GitHub <sysbot+gh@w3.org>
• Date: Wed, 19 Jun 2024 06:30:27 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2177851770-1718778625-sysbot+gh@w3.org>

`round()` is what you need then.

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

https://codepen.io/thebabydino/pen/yLWvKyK?editors=1100

![Animated GIF. Shows a box resizing with the viewport in steps such that it can accommodate for the border pattern to repeat an integer number plus .5 times.](https://github.com/w3c/csswg-drafts/assets/76854602/0bd1d7e5-9c23-4dbb-99b1-8f80596694d1)

-- 
GitHub Notification of comment by thebabydino
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-2177851770 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 06:30:27 UTC