1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 利用CSS3漸層語法,繪製出2020東奧新版台灣國旗(IN)

利用CSS3漸層語法,繪製出2020東奧新版台灣國旗(IN)

2021/08/01

梅問題-利用CSS3漸層語法,繪製出2020東奧台灣新國旗
  最近有在看2020東京奧運的朋友,應該對於這張梗圖不感陌生,說真的若把台灣國旗改成這樣子,還挺好看的,而這張梗圖也在網頁前端圈,造成一波熱烈的討論,就有不少的好手,利用CSS3的語法繪製出來這張圖,但大部分不是用偽元素,就是在裡面包覆多個標籤,再作設定。

但身旁的有位好友赤木,竟然透過漸層的方式,將它繪製出來,真是神乎其技,因此梅干就借花獻佛一下,利用已繪製好的旗面,再用偽元素,加入台灣的字樣,因此無論你是否有在看這次的奧運,也一塊來看看,如何利用CSS3的語法,繪製出2020東奧的台灣新國旗吧!


Step1
首先,先建立一個<div class="taiwan-flag"></div>標籤,接著再用CSS3的漸層語法,分別繪製出二條直線,與一個圓形。
.taiwan-flag {
  position:relative;
  width: 800px;
  height: 480px;
  background:
    radial-gradient(circle, #707372 0%, #707372 50%, transparent 50%) no-repeat,
    linear-gradient(
        to bottom,
        transparent,
        transparent 43%,
        #fff 43%,
        #fff 50.8%,
        transparent 50.8%
      )
      no-repeat,
    linear-gradient(
        to right,
        transparent,
        transparent 65%,
        #fff 65%,
        #fff 74%,
        transparent 74%
      )
      no-repeat,
    #198964 no-repeat;
}
梅問題-利用CSS3漸層語法,繪製出2020東奧台灣新國旗
Step2
接著再加入背景的位置與顯示尺寸。
background-position: 37% 45.4%, 0% 0%, -20% bottom, 0% 0%;
background-size: 3% 3%, auto, 50% 50%, auto;
梅問題-利用CSS3漸層語法,繪製出2020東奧台灣新國旗
Step3
最後再用一個偽元素,加入aiwan文字,並設定文字顏色、字級、位置,這樣就大功告成啦!在這也很開心,小戴勇奪銀牌啦!
.taiwan-flag:after{
  content:'aiwan';
  color:#fff;
  font-size:100px;
  position:absolute;
  left:230px;
  top:197px;
}
梅問題-利用CSS3漸層語法,繪製出2020東奧台灣新國旗
#範例預覽

原作者:赤木版