玉米の宅觀測: [新手向]教你一步步用CSS畫出中華民國國旗

前幾天提到過，10/10號的九點多到10/11號將近十一點左右，我在這兩天的時間範圍內，將一個中華民國青天白日滿地紅的國旗用CSS語法畫出來，扣掉不能用的時間，將近搞了七小時。我有時會像這樣一股腦地投進完全不清楚的領域，例如以前的痛手機w。老實說對我這種半吊子的傢伙頗具挑戰性，在完成之前都不確定能不能完成它。

在該篇記錄文中，我提到我是「從無到有」建立CSS知識。老實說現在看來有點不太對，在很久很久以前，我曾經向強者我同學請教過CSS，不過那時還沒正式接觸網頁。後來雖然有了這個部落格，但由於Blogger有了可視化的版面編輯功能，所以對於純文字的東西一向敬而遠之。對於html這種語言也是半吊子的稍為掃過一些簡單的內容，僅僅到「 不會感到害怕」的程度為止。

以上這是我在開始畫國旗有的先備知識。僅僅如此，少的可憐吶，在毫無基礎的情況下，從頭開始研究也是情有可原。以下內容會一步步的交代我從完全不熟悉CSS，直到畫出國旗的過程。當然會附上許多許多的參考網站，因為我完全無基礎啊XD

GO!!!

直接搜尋畫國旗資料

我非常貪心，一開始就直接尋找「用CSS畫國旗」的資料。認為稍微改改就可以上陣了，於是找到了這幾篇資料(中文也)：

因為我用中文尋找，所以就得到這種結果啦別打我w。
起初看到美國國旗就暈了，所以就研究起了第三個連結，發現它的國旗是運用特殊符號拼湊而成，以下用原始碼解析：




<div style="position: absolute; top: 10; left: 167; width: 268; height: 267; z-index: 1"><span style="font-size:200pt;color:red">■</span></div>

我後來才知道這一長串是把css包到html內容裡的寫法。
裏頭的position, top, left, width, height, z-index等等都是十分常寫的用法，CSS 語法教學這個教學網站就寫得很好。總之國旗的紅底就是利用兩個特殊符號"■"放大、變紅色，拼湊起來。

其他參考網站還有：

這段理解之後，我就利用現有知識(運用特殊符號構成)，拼湊粗了這個版本：

但到這裡就遇到了第一個卡關：旋轉。因為完全不懂transform: rotate( )的用法，怎麼寫都無法讓三角形旋轉。並且，這階段的國旗幾乎是利用「目測」所調整繪出，所以感覺還是有些不太對。包在一起的語法也看得很辛苦......

所以就砍掉重練了XDD

transform用法帖：

調整搜尋為畫基本圖形(三角形、圓形等)

這幾個參考網站與我完成有直接關聯XD：

其中在第二個連結，我可以說「學到了非常多」啊!!!

假設已經會了連結一的三角形畫法，就拿連結中的幾個例子來瞧瞧吧：

五角神星星：




#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid red;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}

#star-five:before {

   border-bottom: 80px solid red;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   position: absolute;

   height: 0;

   width: 0;

   top: -45px;

   left: -65px;

   display: block;

   content: '';

   -webkit-transform: rotate(-35deg);

   -moz-transform:    rotate(-35deg);

   -ms-transform:     rotate(-35deg);

   -o-transform:      rotate(-35deg);



}

#star-five:after {

   position: absolute;

   display: block;

   color: red;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}

這實在是太恐怖了XDD 其實目前的國旗RC2(欸還編號了這真自大啊)並沒有用到:after、:before的偽元素的寫法。
這個五角星的構成方式，簡單來說就是 利用三個旋轉過的三角形啦!!!!!真是高招分解w。
那麼國旗的十二角星星，能不能用三角形分解呢？
當然可以!!要不然我就畫不成了QQ

重新構成中華民國國旗

首先當然拋棄直覺式的畫法，直接參考官方設定囉。

(來自維基百科)

將整體大小訂為400px*600px的大小：



#red-zone {

 display:block;

 width:600px;

 position:relative;

 height:400px;

 background:#fe0000;

 float:left;

 z-index:4;

}



#blue-zone {

 display:block;

 width:300px;

 height:200px;

 background:#000095;

 float:left;

 z-index:5;

 position:absolute;

}

大色塊面積十分輕鬆搞定，接下來是看起來有些不容易的十二角星。我是先畫在紙上再拆解確認，因為小弟電腦能力不好用筆寫比較好處理。附上手稿 ~~(好帥的名稱w)~~：

先畫出分割出的每個三角形，並表示出角度

記得算出約略的大小參數好用border來畫出來

這是其中一個三角形畫好的樣子：

原始碼：



#demo-triangle {
  display:block;
  height: 0;
  width: 0;
  border-width: 0 72px 39px 72px;
  border-color: transparent transparent red transparent;
  border-style: solid;
}

在當中加上transform: rotate( )來旋轉，分別為75, 45, 15, -15, -45, -75, -105度(不爽負號請自行添加360 www)

接下來則是畫面中圓形的太陽。這點使用border-radius畫圓而且還要努力不懈地微調位置。border-radius寫法可以參考上面神繪圖連結或是MUKI姊姊的部落格。

唯一可惜的是transform:rotate和border-radius似乎在IE上起不了作用......明明就是支援的壓!!!最後令我感同身受地說出一句：

"IE SUCKS."

最後一個遇到的問題是喬位子。可以參考這幾篇：

所以我又多定義了一個父元素來解決此問題



#ohfather{
  position: relative;
}

然後父包子：


<div id=ohfather>
    <div id=star-twelve1></div>
    ......
    ......
</div>

完整成品以及原始碼

原始碼：


    
 <html>
    

    
 <style>
    
   #red-zone {
     display: block;
     width: 600px;
     position:
    relative;
     height: 400px;
     background: #fe0000;
     float: left;
     z-index: 4;
   }

    

    
   #blue-zone {
     display: block;
     width: 300px;
    
    height: 200px;
     background: #000095;
     float: left;
     z-index:
    5;
     position: absolute;
   }

    
   #ohfather {
     position: relative;
   }

    
   #star-twelve1 {
     display: block;
     height: 0;
    
    width: 0;
     border-width: 0 72px 39px 72px;
     border-color: transparent transparent
    white transparent;
     border-style: solid;
     position: absolute;
    
    top: 85px;
     left: 80px;
     -webkit-transform: rotate(75deg);
    
    -moz-transform: rotate(75deg);
     -ms-transform: rotate(75deg);
     -o-transform: rotate(75deg);
     transform: rotate(75deg);
     z-index: 6;
   }

    
   #star-twelve2 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
    
    -o-transform: rotate(45deg);
     transform: rotate(45deg);
     z-index: 7;
  
    }

    
   #star-twelve3 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(15deg);
     -moz-transform: rotate(15deg);
     -ms-transform: rotate(15deg);
    
    -o-transform: rotate(15deg);
     transform: rotate(15deg);
     z-index: 8;
  
    }

    
   #star-twelve4 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
     -ms-transform: rotate(-15deg);
    
    -o-transform: rotate(-15deg);
     transform: rotate(-15deg);
     z-index: 9;
  
    }

    
   #star-twelve5 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
    
    -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     z-index: 10;
  
    }

    
   #star-twelve6 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(-75deg);
     -moz-transform: rotate(-75deg);
     -ms-transform: rotate(-75deg);
    
    -o-transform: rotate(-75deg);
     transform: rotate(-75deg);
     z-index: 11;
  
    }

    
   #star-twelve7 {
     display: block;
     content: "";
    
    height: 0;
     width: 0;
     border-width: 0 72px 39px 72px;
     border-color:
    transparent transparent white transparent;
     border-style: solid;
     position: absolute;
     top: 85px;
     left: 80px;
     -webkit-transform: rotate(-105deg);
     -moz-transform: rotate(-105deg);
     -ms-transform: rotate(-105deg);
    
    -o-transform: rotate(-105deg);
     transform: rotate(-105deg);
     z-index: 12;
      }

    
   #sun1 {
     display: block;
     width: 85px;
     height:
    85px;
     -webkit-border-radius: 47px;
     -khtml-border-radius: 47px;
    
    -moz-border-radius: 47px;
     -ms-border-radius: 47px;
     -o-border-radius: 47px;
     border-radius: 47px;
     background: #000095;
     border-color: #000095;
     position: absolute;
     top: 65px;
     left: 109px;
    
    z-index: 13;
   }

    
   #sun2 {
     display: block;
     width: 75px;
     height:
    75px;
     -webkit-border-radius: 47px;
     -khtml-border-radius: 47px;
    
    -moz-border-radius: 47px;
     -ms-border-radius: 47px;
     -o-border-radius: 47px;
     border-radius: 47px;
     background: white;
     border-color: white;
     position: absolute;
     top: 70px;
     left: 114px;
    
    z-index: 14;
   }
 </style>
    

    
 <div id=blue-zone></div>
 <div id=red-zone></div>
 <div id=ohfather>
   <div id=star-twelve1></div>
   <div id=star-twelve2></div>
   <div
    id=star-twelve3></div>
   <div id=star-twelve4></div>
   <div id=star-twelve5></div>
   <div id=star-twelve6></div>
   <div id=star-twelve7></div>
   <div
    id=sun1></div>
   <div id=sun2></div>
 </div>
    

    
 </html>

題外話：網誌邊攔放的迷你版還沒改寫完成，是用舊版寫法，或許縮小貼紙版明年再發布吧XD這樣就不會和國慶日累格惹......

[新手向]教你一步步用CSS畫出中華民國國旗 | 貨真價實的教學文啊XD

直接搜尋畫國旗資料

調整搜尋為畫基本圖形(三角形、圓形等)

重新構成中華民國國旗

完整成品以及原始碼

沒有留言 :

張貼留言