CANNY的私藏地圖

這裡是視覺設計師臨危受命，利用三個月時間自學，完成公司形象官網的一些筆記，主要是怕自己之後又忘記了，也分享給同是網站設計的新手，由於是剛接觸網頁設計的小白，很多程式碼都是Google+ChatGPT拼湊來的，所以不要問我原理阿!
另外，以下所分享的程式碼均有整合Bootstrap框架

網頁上想要多點變化，不想要方方正正的色塊或圖片，可以怎麼做呢?
首先到這個CSS clip-path maker網站http://bennettfeely.com/clippy/ ，拖拉出想要的形狀後，複製code


我試了兩種方式
第一種是在CSS屬性中設定background-image
程式碼在此 http://codepen.io/Canny-Huang/pen/YzMqRZX

第二種方式是直接將圖片嵌入 HTML 中的 <img> 標籤
我的網頁後來是採用這種方法，因為這樣無需透過 CSS 修改即可更換圖片，更加方便。另外，我利用文字的 padding 屬性來調整圖片的高度，以實現友善的響應式設計。(ps. 如果覺得預設的 padding 高度不足，可以在 variables.scss 文件中調整 padding 的預設值 )
程式碼在此 http://codepen.io/Canny-Huang/pen/yLWyRaL

另外，我想製作斜邊色塊，然後將去背圖片壓在色塊上，和ChatGPT溝通了好久，終於修改出來了
程式碼在此 http://codepen.io/Canny-Huang/pen/mdYEMaN
特別注意，色塊需依照文字多寡，在CSS裡調整高度，手機版與電腦版的高度也會不同