CODEWITHSUNDEEP
css
user2726041
user2726041

Reputation: 359

Alternating triangle colour background using linear-gradient in CSS3

I've created the following background pattern:

https://codepen.io/anon/pen/JJvbjz

CSS:

body {
    background:
        linear-gradient(-120deg, transparent 63%, #fff 63%), 
        linear-gradient(120deg, transparent 63%, #fff 63%), 
        linear-gradient(to bottom, blue, blue);
    background-size: 90px 50px;
    background-repeat: repeat-x;
}

I'd like to be able to alternate the colours of the triangles e.g. red, blue, green, red, blue, green, red, blue green etc. etc.

Is this possible?

Upvotes: 0

Views: 220

Answers (1)

vals
vals

Reputation: 64164

I have kept your original design as a reference.

In the edited design, I have:

set the background size to twice the original size

changed the way to generate the triangles, this way you only need 2 elements instead of 3.

And added a non-0 position to the 3rd and 4th background images, to make them appear interleaved with the first 2

.test {
  width: 100%;
  height: 100px;
    background:
        linear-gradient(-120deg, transparent 63%, #fff 63%), 
        linear-gradient(120deg, transparent 63%, #fff 63%), 
        linear-gradient(to bottom, blue, blue);
    background-size: 90px 50px;
    background-repeat: repeat-x;
}

.test2 {
    width: 100%;
    height: 60px;
    background-size: 180px 60px;
    background-repeat: repeat-x;
    background-image: linear-gradient(120deg, blue 26px, transparent 28px),
                      linear-gradient(-120deg, blue 26px, transparent 28px),
                      linear-gradient(120deg, red 26px, transparent 28px),
                      linear-gradient(-120deg, red 26px, transparent 28px);
    background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}
<div class="test"></div>
<div class="test2"></div>

Upvotes: 2

Related Questions