核心:每个渐变背景留出空白区域,给后面的渐变背景绘制
效果图:
代码示例:
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>