Three colors angled background color

Question

How could I achieve a background that looked similar to this image:

Only 3 colors, angled from the top corner out like a sunray.

Maybe sticking with a simple PNG or SVG background image would be a better approach.

Goodhen

Answer 1

The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image.

The snippet uses a couple of pseudo-elements with different background colors skewed at required angles to produce the three-color effect.

.bg {
  position: relative;
  height: 200px;
  width: 400px;
  padding: 4px;
  background: orange;
  overflow: hidden;
}
.bg:after,
.bg:before {
  position: absolute;
  content: '';
  left: 0px;
  height: 100%;
  width: 100%;
  transform-origin: right top;
}
.bg:before {
  top: 0px;
  background: red;
  transform: skewY(-45deg);
}
.bg:after {
  top: -100%;
  background: yellow;
  transform: skewY(-15deg);
}
span {
  position: relative;
  z-index: 2;
}

/* Just for demo */
.bg:hover {
  height: 200px;
  width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
  <span>Some content inside</span>
</div>

Angled linear-gradients also could be used but I don't think they are good for dynamic sized container elements as the angles need to be modified as the dimensions change to keep the appearance the same.

Below is a snippet using linear-gradient. Hover on the shape to see how a change of width and/or height affects it.

.bg {
  position: relative;
  height: 200px;
  width: 400px;
  background: linear-gradient(310deg, red 30%, transparent 30%), linear-gradient(340deg, transparent 58%, yellow 58%), orange;
  overflow: hidden;
}
.bg:hover {
  height: 200px;
  width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
  <span>Some content inside</span>
</div>

Katabasis

@TimKrul: Yes, that is what I wanted to illustrate and hence left it like that. Gradients need color stop/angle change when dimensions of container changes. – Katabasis

Gradient angle can be made to self-adapt. (Not sure if my english is good enough here :-) ) See my answer – Chyack

Answer 2

SVG

This can be done with SVG. I used three polygon shapes. This can be set to a background-image. Or alternatively can be used inline so you can use css properties on it.

html, body {
  margin: 0;
  padding: 0;
}
.triple {
  width: 250px;
  height: 250px;
}
.triple:hover {
  width: 500px;
  height: 100px;
}

<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon fill="#dd2" points="0,0 100,0 0,60" />
  <polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
  <polygon fill="#992" points="30,100 100,0 100,100" />
</svg>

Tsarina

Answer 3

Yes, it can be done with gradients, in a responsive way.

That is asuming that when the aspect ratio changes, you don't want to keep the angles, but the relative positions

The trick is to use simbolic names in the gradient direction, and then playing with the size and the position of the background-image

.test {
    display: inline-block;
    border: solid 1px black;
    background-image: linear-gradient(to top left, tomato 50%, transparent 50%),
    linear-gradient(to bottom right, lightgreen 50%, transparent 50%);
    background-size: 60% 100%, 100% 50%;
    background-repeat: no-repeat;
    background-position: bottom right, top left;
}

#test1 {
    width: 200px;
    height: 100px;
}

#test2 {
    width: 100px;
    height: 100px;
}

#test3 {
    width: 70px;
    height: 100px;
}

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>

Chyack

That's nice. Is the browser support for the to [side] [side] option good? Need to check. – Katabasis

@Katabasis Yes, support is good - quite as good as for the angle syntax. – Chyack

Answer 4

Use a 4-color GIF image. This will give you both cross-browser/platform compatibility as well as backward compatibility, and the size will be small with this type of image. If the colors are subtle as shown the "jaggies" will be camouflaged somewhat (or provide a larger size).

A good option is to use SVG which has good support in modern up-to-date browsers.

Wideawake