今日文章目錄
> - 應用情境
> - CSS原理練習
> - 應用情境練習
> - 參考資料

應用情境

• 在 DAY05文章中，我們練習用CSS畫三角型。再來，我們也很常看到將四邊形壓在大範圍的背景:
  
  參考圖片來源
  
  參考圖片來源

接下來就直接來練習看看吧！

CSS原理練習

• 這次會使用到CSS background-image。
• background-image 有兩種寫法：
  • url("../photo.jpg") : 引入圖片路徑。
  • linear gradient() : 漸層效果，也就是這次會用到的用法。

    • 寫法參考CSScoke 金魚都能懂的CSS必學屬性系列 第 17 篇

    • linear gradient(依顏色順序顯示方向, 顏色1 顯示位置, 顏色2 顯示位置, ...)

    • 依顏色順序顯示方向 : 可以寫成 to 關鍵字 或 角度。

      • to top = 0 deg(=360deg)
      • to right = 90 deg
      • to bottom = 180 deg
      • to left = 360 deg
        

    • 當然，也可以分個更細：

      • to top right = 45 deg
      • to bottom right = 135 deg
      • to bottom left = 225 deg
      • to top left = 315 deg

    • 但這邊要特別留意，不同 block的長寬比顯示效果會不太一樣。
      

• codepen 範例：https://codepen.io/chen-chens/pen/wveoBXj?editors=1100

應用情境練習

• 先放上練習的 codepen: https://codepen.io/chen-chens/pen/gORLpMd?editors=0110
  
• 分別使用 ::before ::after 創造出兩個幾何圖做拼接，剛好應用到上面提到 to 關鍵字與角度在長寬比不同的顯示應用。
• 補充一點：如果圖片是放在 background-image 裡面的話，要特別注意該區塊的寬高要自己設定、或用其他內容撐開。

• 這個效果也可以用昨天練習到的 border三角型畫法完成，大家也可以動手試看看喔！

參考資料

• https://ithelp.ithome.com.tw/articles/10248148
• https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

明日預告：