Divide the body into 4 different colored parts

Question

Divide the body into 4 different colored parts

Navigation

#1 by (2 votes)

0

Would you get the result of the image below using only Css in body ?

Obs: Without using divs

MaximumI'veachieved:

body{ 
  background: linear-gradient( to right, red 25%, green 25%, green 70%, yellow 70%, yellow 80%, blue 80%, blue );
}

css3

asked by anonymous 20.09.2018 / 20:06

1 answer

How to recognize the selected Entry Why do not you enter the notes loop?

score 2 · Accepted Answer

Option 1

4 backgrounds with 1/4 the size of the screen and aligned each in a cando with background-position

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image:
                    linear-gradient(#f00 0, #f00 100%),
                    linear-gradient(#ff0 0, #ff0 100%),
                    linear-gradient(#0f0 0, #0f0 100%),
                    linear-gradient(#00f 0, #00f 100%);
    background-size: 50% 50%;
    background-position: top left, top right, bottom right, bottom left;
    background-repeat: no-repeat;
}

Option 2

Exactly with these colors I could not because of the blend-mode of the colors ... but it was able to arrive at a very close result ...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background:
    linear-gradient(to bottom, #f00 0, #f00 50%, transparent 50%, transparent 100%),
    linear-gradient(to right, #00f 0, #00f 50%, #ff0 50%, #ff0 100%);
    background-size: 100% 100%, 100% 100%;
        background-blend-mode: difference;
}