用CSS三角形、圓形、長方形設計成英文字母 Pure css with English alphabet design
哈囉～大家好～
我今天要簡單介紹最近在執行的一個小專案
因為自己是設計科系畢業，有需多小要求在網頁上想要呈現，今天要介紹的是我設計的英文字母，需要在網頁上並且想要以動畫（ animation&transition）的方式呈現。今天這篇先著重介紹設計的英文字母如何用css寫出來（九個字母），下一篇再來介紹要如何動起來囉～
首先介紹大寫的Ｎ，由兩個等腰三角形（wordn、wordn-1）、一條直線（link-right）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
三角形的寫法重點在於 border-width 以及 border-color ，可以在 border-width的其中兩側設定一樣的長度～ 再用border-color把其他三邊的顏色設為 transparent~只剩下一邊有顏色時就變成一個等腰三角形囉！
直線的部分直接使用border-right指定右邊框的線的顏色高度等等…一的Ｎ字型的字母就完成了！！
border-width: 上邊框寬度 右邊框寬度 下邊框寬度 左邊框寬度
border-color: 上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色
border-right: 右邊的框線，寫法和寫border一樣，寬度、樣式、顏色…等
大寫的Ｔ，由兩條橫線以及直線（wordt、wordt-1）與一個三角形（wordt-2）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
直線的部分直接使用border-right指定右邊框的線的顏色高度等等…跟上面的Ｎ裡的直線是一樣的，不一樣的地方在於位置，我這邊用的都是以上一個div的大小去對位，因此都是以position: absolute做定位後，微調left、top…等等，橫線使用的是border-top指定上方的線當作橫線做出顏色高度…等。
再來就是一個小三角形的設計，也是以 border-width 以及 border-color去做變化的喔！在微調位置（left、top）就對位完成囉～是不是越做越快速啊～
position: absolute 定位是在他所處上層容器的相對位置。
border-top：上方的框線，寫法和寫border一樣，寬度、樣式、顏色…等
大寫的Ｕ，由一個線型Ｕ以及線型撇（wordu、wordu-2）與一個切半邊的Ｕ色塊（wordu-1）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
老實說Ｕ型困擾我蠻久的，一直在想要如何分解成這三部分，第一個正Ｕ型，主要是用border-radius去做左右下方的弧度，再以 border-color將最上方的線段隱藏，就順利地寫出來囉～
再來就是切掉一部分色塊的Ｕ型，我利用的是linear-gradient，在背景的色塊上製作切面，再慢慢調到想要的角度，這部分大家可以都試試看～
最後的一小撇我也是利用border-radius調好彎曲的角度後，再利用border-color隱藏上、左兩邊的線條，在微調位置（left、top）就對位完成囉～
border-radius: 左上角 右上角 右下角 左下角
linear-gradient:旋轉角度 隱藏大小 區塊顏色（依照我上述碼，有很多寫法）
大寫的Ｂ，由長方型（wordb）兩個圓角方形（wordb-1、wordb-2）以及兩段弧形線（wordb-3、wordb-4）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
長方形的寫法主要就是控制長hight寬width讓它與我原先設計很相似。
兩個圓角方形主要是用border-radius控制右上以及右下兩個角度達到我想要的畫面以及寬度，上下兩的圓角方形最大不同就是寬度，讓他倆有比較和諧的畫面～嘻嘻 下方的圓角方形也利用微調位置（top）就對位在下方喔～
最後的兩小撇是利用border-radius調好彎曲的角度後，再利用border-color隱藏上、下、左三邊的線條，再微調位置（left、top）就對位完成囉～真心覺得border-color是很厲害的語法～有好多方法可以玩玩看^^
這裡特別有用到z-index去做一個置上的動作，就可以達到我想要的畫面囉～
z-index ：當元素之間重疊的时候， 决定哪一個元素覆蓋在其餘元素的上方顯示。
大寫的Ｅ，由長方型（worde）兩個三角形（worde-1、worde-2）以及一段橫線（worde-3）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
長方形的寫法主要就是控制長hight寬width讓它與我原先設計很相似。
再來兩個像鏡射一樣的三角形，用的就是使用不同角度的 border-width 以及 border-color去做變化，鏡射部分是利用微調位置（top）就對位在下方喔～只是像鏡射而已不是用其他語法寫成的～可以在程式碼裡面看哪裡不一樣喔～很好玩的，當初寫的時候也蠻頭痛的～哈哈大家可以自己玩玩看喔～
最後的一條橫線使用的是border-top指定上方的線當作橫線做出顏色高度…等，再微調位置（top）讓它在兩個三角形的正中間就完成囉～
大寫的Ｘ，由兩個斜線（wordx、wordx-1）以及兩個三角形（wordx-2、wordx-3）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
兩條斜直線我是使用border-top指定上方的線當作橫線做出顏色寬度後，再用transform: rotate做出讓他斜角的部分，對稱就讓度數加個負數就完成一個交叉形狀～
再來兩個像鏡射一樣的三角形，用的就是使用不同角度的 border-width 以及 border-color去做變化，鏡射部分是利用微調位置（top）就對位在下方喔～跟上述所說的一樣喔～就是利用 border-width 以及 border-color去做很多三角形的變化^^一個Ｘ就完成囉～
transform: rotate：deg (角度)、rad (弧度) 、grad (梯度)。
大寫的Ｓ，由兩個直角扇形（words、words-1）、一個扇形（words-2）、長方形線條（words-3）以及一弧形框架（words-4）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
這個Ｓ的扇形還真考倒我了呢～但其實也只要幾個程式碼就可以輕鬆完成～我使用border-radius只剩一邊有角度，其他的設定為0，就會有直角扇形出現了～當然還包括原本圓形的寬度顏色喔！
還有一個比較特殊的三角形我用的是三角形的寫法，寫完border-radius再加上 border-width 以及 border-color調出我想要的三角形大小角度（可以四邊都寫寫看會發現有很多不一樣喔）我寫到像1/6圓的扇形後，利用transform: rotate轉到我想要的位置，再用z-index將它置後，三個扇形就完成了～
長方形線條我是簡單寫個長方形長hight寬width，加上 border-color讓上下的線條隱藏，最後transform: rotate旋轉，再微調位置（top、left）讓它在正中間就完成囉～
最後的圓弧線條也是依樣，寫一個圓形線條，包括border-radius、border再加上 border-color讓左用的線條隱藏，還要記得微調位置（top、left）讓它在兩條斜直線中間就看起來很不錯了～
大寫的Ｙ，由兩個斜直線（wordy、wordy-1）、一條直線（wordy-2）、一個三角形（wordy-3）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
兩條斜直線我是利用border-top指定上方的線當作橫線做出顏色寬度後，再用transform: rotate做出讓他斜角的部分，對稱就讓度數加個負數就完成一個交叉形狀～跟上方Ｘ斜直線是一樣的做法喔～調整寬度以及顏色而已～
一條直線的部分直接使用border-right指定右邊框的線的顏色高度等等，跟上述的Ｔ中的直線是一樣的～很簡單吧。
再來就是一個小三角形的設計，也是以 border-width 以及 border-color去做變化的喔！在微調位置（left、top）就對位完成囉～跟上的三角形都一樣拉！越做越上手囉～加油
大寫的Ｍ，由兩個三角形（wordm、wordm-1）、一個線形框（wordm-2）以及兩個斜直線（wordm-3、wordm-4）設計而成。
以下程式碼使用Sass撰寫，再請注意一下喔！
兩個大三角形一樣都是調border-width 以及 border-color簡單做出來的，介紹到這邊發現直己一直在利用三角形在設計呢～也讓我在寫程式碼的時候越來越熟悉～如果大家有時間試試看的話也可以跟我一起分享製作過程喔～
線型框Ｍ我是簡單寫個長方形長hight寬width，加上 border-color讓上下的線條隱藏，再微調位置（top、left）讓它在正中間就完成囉～這邊比較不一樣的是原本想用兩條直線去做出Ｍ的左右線條，最後選擇用隱藏線條的方式呈現～
最後兩個連接線形框的斜線Ｍ，是利用border-top指定上方的線當作橫線做出顏色寬度後，再用transform: rotate做出讓他斜角的部分，對稱就讓度數加個負數就完成一個交叉形狀～跟上方Ｘ、Ｙ斜直線是一樣的做法喔～調整寬度以及顏色而已～
以上的語法中很多都有用絕對定位去做top、left做定位微調，以及寬高我都沒特別強調因為是可以依照自己的需求特別去做調整。
做完了這幾個英文字母後，發現其實都是用幾個語法變化寫成的，或許有更好的寫法，可以留言在下面一起討論喔～
謝謝觀看～歡迎留言指教