css3+实现菱形图形,CSS3 菱形图案

CSS 语言: CSSSCSS 确定 html { background-color: #f1efda; /* Pink lines */ /* Black

CSS

语言:

CSSSCSS

确定

html {

background-color: #f1efda;

/* Pink lines */

/* Black lines */

/* Black diamonds */

/* Pink diamonds */

background-image: linear-gradient(-116deg, transparent 40%, #f5a3a3 0, #f5a3a3 42%, transparent 42%), linear-gradient(116deg, transparent 41%, #f5a3a3 0, #f5a3a3 43%, transparent 43%), linear-gradient(-116deg, transparent 40%, #666 0, #666 42%, transparent 42%), linear-gradient(116deg, transparent 41%, #666 41%, #666 43%, transparent 43%), linear-gradient(-115deg, #666 16.5%, transparent 0), linear-gradient(-65deg, #666 16.5%, transparent 0), linear-gradient(115deg, #666 16.5%, transparent 0), linear-gradient(65deg, #666 16.5%, transparent 0), linear-gradient(-115deg, #f5a3a3 16.5%, transparent 0), linear-gradient(-65deg, #f5a3a3 16.5%, transparent 0), linear-gradient(115deg, #f5a3a3 16.5%, transparent 0), linear-gradient(65deg, #f5a3a3 16.5%, transparent 0);

/* Pink lines */

/* Black Lines */

/* Black diamonds */

/* Pink diamonds */

background-size: 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em, 8em 8em;

/* Pink lines */

/* Black Lines */

/* Black diamonds */

/* Pink diamonds */

background-position: 3em -8em, -3em -8em, -9em 8em, 9em 8em, 0, 0, 0, 0, 4em, 4em, 4em, 4em;

}