今日文章目录
> - 应用情境
> - 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()

明日预告：