Could these scalable backgrounds be made with css?

I'm pretty inexperienced with css backgrounds and it always amazes me what people who are experienced with them can create. So I'm curious whether the top 3 shapes could be made in a way that easily scales to accommodate the content like in the two examples beneath the 3 shapes without the need for magic numbers etc
No description
9 Replies
Chooβ™šπ•‚π•šπ•Ÿπ•˜
These are all possible in pure CSS, but the simplest are the top middle and top right ones. The others are complicated due to the overlapping of the circles that make up the pattern. It would be simpler if they didn't overlap. The overlapping in itself isn't a problem if the number of repetitions is fixed, but you want an arbitrary number of repetitions with overlap.
Jono Lewarne
Jono LewarneOPβ€’4w ago
I was wondering about the top left one being possible with a sprinkling of js. Having a flex container and negative margins on the children and then adding extra columns for every x amount of width increase. The overlap would be flexible but that’s ok
Sleep Twitch
Sleep Twitchβ€’4w ago
Wouldn't it be easier to use svg? Never mind.. that would be hard with the variable width..
capt_uhu
capt_uhuβ€’4w ago
SVG would definitely be the better way to go to create these images than a bunch of presentation-al divs. You could use the SVGs as border-image or mask-border/-webkit-mask-box-image. Or this looks like a potentially use case for the PainAPI.
Simon
Simonβ€’4w ago
I'll just drop this here an leave https://css-generators.com/
capt_uhu
capt_uhuβ€’4w ago
While these generators are great and I appreciate all the work Temani has put into them I've never been able to use them in practice for anything. Maybe the designers I work with are just more picky than the rest but with this one in particular: https://css-generators.com/custom-borders/ The issue is always the corners not working well. Not matching up as expected. But if it works for you in your use case than by all means have at it.
Jono Lewarne
Jono LewarneOPβ€’4w ago
OK thanks guys, I'll see if I can make it work with the generator and if not, svg in general
Sleep Twitch
Sleep Twitchβ€’4w ago
This one is almost the one on the top left.. playing a bit with the values could give you what you want..https://css-shape.com/scalloped-box/
CSS Shape: Scalloped Box
A CSS-only Scalloped Box shape made with a single-element and modern CSS.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
That doesn't have the overlap, which is what I said would make it difficult.
Want results from more Discord servers?
Add your server