<section class="cssGradient1"></section>
<section class="cssGradient2"></section>
*.cssGradient1{
min-height:20em;
background-color:hsl(0,0%,0%);
background-image:radial-gradient(10px,hsl(120,100%,50%),hsl(120,100%,50%) 99%,transparent 99%);
}
*.cssGradient1{
min-height:20em;
background-color:hsl(0,0%,0%);
/*縮小 gradient box 範圍*/
background-size:20px 20px;
/*縮小圓的尺寸以留一點空隙*/
background-image:radial-gradient(farthest-side,hsl(120,100%,50%),hsl(120,100%,50%) 80%,transparent 80%);
/*由左上角開始*/
background-position:0 0;
}
*.cssGradient2{
min-height:20em;
background-color:hsl(0,0%,0%);
background-image:linear-gradient(45deg,hsl(60,100%,60%),hsl(60,100%,60%) 180px,transparent 180px);
}
*.cssGradient2{
min-height:20em;
background-color:hsl(0,0%,0%);
/* gradient box 縮小成正方形*/
background-size:60px 60px;
/*三角形佔正方形一半*/
background-image:linear-gradient(45deg,hsl(60,100%,60%),hsl(60,100%,60%) 50%,transparent 50%);
/*由左上角開始*/
background-position:0 0;
}
更多參考→展示