css渐变实现矩形均分八色

核心:每个渐变背景留出空白区域,给后面的渐变背景绘制

效果图:

代码示例:

div{
    width: 200px;
    height: 200px;
    background:
        linear-gradient(45deg,#f00 50%, transparent 50%) 0 0/50% 50%,
        /* 往右一半橙,一半透明 */
        linear-gradient(90deg,#f90 50%, transparent 50%) 0 0/100% 50%,
        /* 往右下角方向渐变,该背景图往右移动自身距离的100% */
        linear-gradient(135deg,#fe0 50%, transparent 50%) 100% 0/50% 50%,
        /* 默认从上往下渐变,大小均分 */
        linear-gradient(180deg,#0c6 50%, transparent 50%),
        /* 往左下角渐变,大小为对角线一半,透明色处开始绘制 */
        linear-gradient(225deg,#09f 50%, transparent 50%),
        /* 往左渐变 */
        linear-gradient(270deg,#05c 50%, transparent 50%),
        /* 左上渐变 */
        linear-gradient(315deg,#95c 50%, transparent 50%),
        /* 往上渐变 */
        linear-gradient(360deg,#60a 50%, transparent 50%);
    background-repeat:no-repeat;
}

<div></div>