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
9 Replies
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.
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
Wouldn't it be easier to use svg?
Never mind.. that would be hard with the variable width..
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.I'll just drop this here an leave https://css-generators.com/
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.
OK thanks guys, I'll see if I can make it work with the generator and if not, svg in general
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.
That doesn't have the overlap, which is what I said would make it difficult.