I need to apply a specific set of colours to a repeat CSS diamond pattern, but I think that the way it is created this is not possible.
I am looking to make this a CSS only solution.
Here is my page: http://corkeprojects.co.uk/cakeindex.html
Here is where I got the diamond pattern from: https://codepen.io/huijing/pen/avmxbw
Here is the sort of effect that I am looking for:
So i would say your “sort of effect” doesnt repeat. It appears to be random.
Absolutely! While achieving a complex, multicolored pattern with pure CSS can be tricky, there are a couple of approaches you can try to achieve a similar effect to the one you linked in the image.
One method is to use nested pseudo-elements like ::before and ::after to create the diamond shapes with background colors. You can then use gradients within those elements to create a color transition.
Another approach is to use a background image with your desired pattern and colors. This can be achieved using a SVG file which allows for more complex patterns and can be referenced within your CSS.
Here are some resources that might be helpful:
CSS gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
Using SVGs as background images: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image
I meant repeat pattern i.e. diamonds.
The colour in the picture I have will do.
Although I wasn’t looking for a gradient effect, just flat block colours and SVG seems a little OTT for my needs.
But thanks anyway.
I dont know what colours you have in the picture; define them.
There’s no such thing as “flat block colours” in background patterns. It’s all “gradients”, though the gradients can have hard edges, which is why the previous poster referred you there.
There’s also no such thing as random in gradients, which is why I asked what colour pattern you want to produce. “Random” wont be random. If you want it to match your picture exactly, use a SVG (or for that matter, a JPG).
I have the following code from https://codepen.io/t_afif/pen/KKeZWjj
I am trying to modify it with basic RGB to start with:
html {
--s: 200px; /* control the size */
--_g1: red 25%, #0000 0 50%;
--_g2: green 25%, #0000 0 50%;
--_g3: blue 25%, #0000 0 50%;
--_l1: #fff 0 1px, #0000 0 calc(25% - 1px), #fff 0 25%;
--_l2: #fff 0 1px, #0000 0 calc(50% - 1px), #fff 0 50%;
background:
repeating-linear-gradient(45deg, var(--_l1)),
repeating-linear-gradient(-45deg, var(--_l1)),
repeating-linear-gradient(0deg, var(--_l2)),
repeating-linear-gradient(90deg, var(--_l2)),
conic-gradient(from 135deg at 25% 75%, var(--_g1)),
conic-gradient(from 225deg at 25% 25%, var(--_g2)),
conic-gradient(from 45deg at 75% 75%, var(--_g3)),
conic-gradient(from -45deg at 75% 25%, var(--_g1)),
conic-gradient(from 135deg at 25% 25%, var(--_g2)),
conic-gradient(from 225deg at 75% 75%, var(--_g3)),
conic-gradient(from 45deg at 25% 75%, var(--_g1)),
conic-gradient(from -45deg at 75% 25%, var(--_g2));
background-size: var(--s) var(--s);
}
I am trying to pair colours along the hypotinuse to achieve a diamond formation.
It’s not my code and I’m using ChatGPT heavily to modify it as this CSS is way beyond me, but it might be possible ?
Right now I don’t have a colour specific palette.
My brain is… swimming with the maths on this but… i’m fairly sure the answer i come to is you need to decide how many colors you have in your pattern before trying to design it, because the… level of complexity you have to generate in a “tile” of the background would depend on the number of colours.
I’m not even sure it’s possible to tile certain numbers of colors in a diamond form. I know you can do 2. 3 may be impossible with a square tile…
Here is an example of the SVG approach:
(The 150px controls the size)
so 8 works. Is it a power of 2 thing? Maybe…
If you increase the viewbox to 6x4 or 4x6, you can have 12 colours.
Right. For a non-square tile, the math changes. So if you’re flexible with your tile size, you can do… any number…? Any even number? brain still fries
Looks like you were right.
I am surprised that such a simple pattern was so hard with just CSS ?
CSS isnt a drawing tool, it’s a styling tool for existing things.
SVG is a drawing tool.
There needs to be an integer number of triangles along the top and bottom of the repeating rectangle. Also there needs to be an integer number of triangles along both sides of the rectangle. So my viewbox dimensions need to be even numbers. Each diamond occupies the same area as 2 viewbox unit squares. So the number of colours is the area of the viewbox divided by 2.
My CodePen is just CSS. It’s styling the background 
.
If you just wanted 4 colours it could be done with a simple line of css.
e.g.
background: conic-gradient(
cyan 90deg,
blue 90deg 180deg,
red 181deg 270deg,
yellow 270deg 360deg
)
0px 0px / 120px 120px;
transform: rotate(45deg);
But you’d need to rotate the background as well as that makes square boxes and not diamonds
However 4 is the max number of colours for that method unless anyone else can sse how to improve on it.
I still think that @Archibald has given you the best solution anyway 
This was what I was looking for, a nice simple solution.
But yes, for the palette that I had it looks like Archibald’s is the closest to what I originally had.
But, as the site is only an interpretation of that I think I will go with your solution as it was the original approach that I wanted to take.
I thank you all !
P.S. You should post this on codepen permanently as I couldn’t find anything like it when I needed it and I suspect many will be looking for such a solution.
Update, in the end, it didn’t work in my version of Safari, so, I had to fall back on Archibald’s efforts.
That’s a shame.
It works well in my ios and in Safari desktop and the properties I used have about 96% support. There may be a workaround but you’d have to test as I no longer have older versions of any browsers (too. risky :)).
Its likely to be either vmax, inset or indeed the conic gradient itself.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.