大家好

繼續昨天的練習

用垂直、水平和距離畫出方格紙

background-image:
    linear-gradient(rgba(200,200,200,.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(200,200,200,.3) 1px, transparent 0),
    linear-gradient(rgba(150,150,150,.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(150,150,150,.3) 1px, transparent 0);
background-size: 
    10px 10px, 10px 10px, 50px 50px, 50px 50px;

再和上面一樣的角度把90度直接改成45度

background-image:
    linear-gradient(45deg, transparent 50%, rgba(200,200,200,.5) 50%),
    linear-gradient(-45deg, rgba(120,120,120,.5) 50%, transparent 0);
background-size: 50px 40px;

欸...!?
居然不是原本想的格子
這應該是2個三角形疊在一起的樣子

另外發現還可以像以下做法

linear-gradient(45deg, #777 25%, transparent 25%, transparent), 
linear-gradient(-45deg, #777 25%, transparent 25%, transparent), 
linear-gradient(45deg, transparent 75%, #777 75%), 
linear-gradient(-45deg, transparent 75%, #777 75%);

連續→

--- 明日待續。