搜尋

熱門關鍵字:

最新文章

  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東奧台灣新國旗
#範例預覽
原作者：赤木版


css3教學, css3漸層, css偽元素, css教學,