去年近底時，參加的社群舉辦活動，因為人手不足的關係，去協助製作活動網站，畫面是我們可愛的設計師 Nina 設計的~
( Nina很專業又認真，設計圖其實很細緻，只是社群幾個工程師都沒什麼美感主要是我又時間不足, 今年如果還有參加活動期望能把美美的設計圖還原出來 )
當時尚有其他個人預定的行程安排，其中一項沒時間完成的就是下圖 " 以平行四邊形呈現的流程圖 "
而就像馬拉松重點不在於獲勝，而是完成。
所以雖然已經拖到2021第一季了，還是期望藉由這篇網誌來補下個句點~
初始設定
建立 HTML 檔
首先下載 Visual Studio Code 或是其他習慣、熟悉的 IDE ( Integrated Development Environment ) ，建立 HTML 檔。
都沒有建立過的話，可以下載 Visual Studio Code 後參考 : 這篇 ( 一定要記得存成 HTML 檔 )
完成後，應該會得到以下結果 ( 不要自己照著手Key哦! )
加入div
開好了頁面之後該怎麼辦? 看看那 1.旋轉 、那 2.平行四邊形，還有 3.圖形下面的小三角形。
是的沒錯，接下來我們會一步一步來完成以上的三個要素。
首先加入 div 並設定 class，我class設定名稱為flow 。把基本屬性，如 : 背景色、框線及文字都先加入。
到這裡為止都是基本的設定值，可以先隨意設定比較差別。
稍微解釋一下 border 屬性，其三個數值分別是 邊框顏色 邊框粗細 邊框樣式 。不按照順序輸入也不會有影響~
( 歡迎前端設計師或工程師分享有沒有什麼順序潛規則~ )
畫面上可以看出，平行四邊形並沒有占滿 body 寬度，所以請再加個 width : 50%; 可以得到以下的畫面。
到這裡是比較基本的頁面設定，後面要慢慢設定到成為流程圖中的樣子~
微旋轉的平行四邊形
旋轉、跳躍，要怎麼辦?
排路隊最重要的是站定點，面試最重要的是別迷路 ( ? )
所以第一步我們先來實作，如何讓 div 旋轉。看似有點艱辛，但實際上非常簡單。
現在網頁設計百花齊放，相對的也友善親民。只需要一個指令 : transform
transform是 CSS 3 的一個屬性，有很多花樣的值可以設定 ( 在 w3schools 的 Property Values 乍看之下頗嚇人 )
基本上可分為 : 旋轉( rotate )、歪斜( skew )、縮放( scale )跟移動( translate )。
這篇僅先就會用到的屬性簡單說明，改天有時間再來介紹 transform
進行的過程中，google到 不老師 對 transform 的 說明文章，非常清楚還搭配釋例，針對屬性本身有疑問的人可以參考看看哦~
所以這裡設定 transform 屬性 rotate (單位為度, deg)，如果其值為正，則會以元件中心點順時針旋轉；反之則逆時針。
以此類推，上圖設定 -2 deg，來達成逆時針的效果。也可以改為 358 deg，會有同樣的結果~
多轉幾圈之後會發現，裡面的文字也跟著轉來轉去。如果今天的設計剛好希望字體維持原本的樣子，那該怎麼辦?
可以將歪斜的效果套用在偽元素上，使偽元素歪斜，以維持元件本身原本的字體與做到外框歪斜效果~
那說好的平行四邊形呢?
如果仔細看過上段的話，不難發現其實答案已經出現了。
沒錯! 就是 transform 的 skew ( 歪斜 ) 屬性。
跟 rotate 一樣，正數為順時針，反之則為逆時針。也可藉由 transform-origin 屬性，來設定元素變化的基準點。
這裡簡單的增加 transform 設定值 skew ( -3 deg )、不改變起始點 ，就可以達成期望的效果~
到這裡看起來就有八成像啦~
最後還有一個小小的三角形
Transform這麼棒，也可以弄出三角形嗎!?
雖然很希望加個指令就快速生出所需圖形，但世界終究沒有我們期望的那麼簡單~
這個圖形的關鍵字其實是 : 「對話框」... 這搜尋結果基本上會跑出一堆圖片。如果用「html 對話框」，那可能會出現 alert 、jQuery UI 之類的東西。
正解是 : 「css 對話框」，那麼就開始我們的繪圖大業啦~
這裡會提到一個之前用過的觀念 - 偽元素，還沒看過的先預習一下哦~
實際畫起來比必填符號還要複雜些，將圖形拆分成「 (原先的) 方塊」、「 (與方塊框線同色的) 白色三角形」、「 (與背景/方塊填滿色同色的) 墨綠色小三角形」
( 這邊設置成墨綠色的話會看不到，暫時以藍色呈現小三角形 )
藉由圖形重疊的方式，來營造出對話框線的效果
那要怎麼生出三角形
如果要畫出一個正方形，相信大部分的人都沒有問題，只要加入一個長寬均等的 div 就可以了~
那三角形呢? 非前端工程師真的想破腦袋也想不到，居然修改框線設定就可以做到了!!
所以我們將以上的 css 修改一下
想要只看到三角形的話，將其他三邊設置為與背景色同，或是 transparent(透明)
熟用的話，可以產生各種不同的變化。是不是比想像中來得簡單啊~
正常的框線如下方左圖，不同顏色的狀況下可以看出會呈現為梯形。
當框線寬度不變，而中心 div 長寬逐漸縮小的狀況下，梯形頂端兩點逐漸收縮，最後就會呈現為(等腰直角)三角形 !!
若四邊框線不等寬時，其實也是一樣概念，收縮於最後的中心點，由此可變化出各種三角形。
玩了那麼多三角形，該做正事了之對話框
將剛剛寫好的三角形css直接搬到 flow 的偽元素 before
看到這個畫面，有點兒驚恐，但先不要怕 ! 其實你沒有做錯~
替偽元素before加上 position : absolute; 就可以解決變形的問題了~
剩下的很簡單，我們只需要透過 top、bottom、left、right 等屬性，調整三角形至我們想要的位置就可以了
看起來是不是有點模樣了~
剩下的一個小三角形，我們會用到另一個偽元素 :: after，設置出一個一樣但較小的(同背景色)三角形
修改屬性 border-color、border-width、bottom、left 後終於完成了~
最終的最後
加上一些細節調整後...
結語
對 CSS 只有幼稚園 (可能是大班) 程度的我來說，上面很多概念都很新穎的新鮮有趣
只是在切分處理這邊只是為了實作，沒有呈現的很漂亮，正常應該不會把所有設定都塞在同一個 class 內
如果今年還有機會參與社群活動的話，不知道會出現什麼新東西，期待到時仍能與各位分享 =)
參考資料
留言列表
{{ article.title }}