搜尋

CSS ICON 圖示形狀變換

這篇教學會使用虛擬元素和 clip-path 這兩種方式，製作六種不同的 ICON 圖示形狀，並搭配 CSS 動畫讓這些圖示形狀互相變換。

快速導覽：

CSS 教學 - CSS ICON 圖示形狀變換

使用虛擬元素產生不同的圖示形狀

使用虛擬元素 before 和 after 是製作 ICON 圖示最簡單的方式，只要運用背景色、寬度高度、定位，甚至在搭配一些邊框、transform 旋轉或陰影，就能產生更多圖示形狀，下方範例會展示六種圖示形狀。

參考：虛擬元素選擇器 ( 偽元素 )、定位 position、邊框 border ( 樣式、粗細、顏色

線上展示：https://codepen.io/oxxo/pen/dPyBNEW

<!-- HTML 程式碼 -->
<div class="icon"></div>
<div class="icon a"></div>
<div class="icon b"></div>
<div class="icon c"></div>
<div class="icon d"></div>
<div class="icon e"></div>


<!-- CSS 程式碼 -->
<style>
  .icon {
    --w: 150px;            /* 使用變數方便後續計算 */
    position: relative;
    width: var(--w);
    height: var(--w);
    background: #f55;
    border-radius: 50%;   /* 使用圓角讓底圖變成圓形 */
    margin: 20px 10px;
    float: left;
  }
  /* 虛擬元素共用樣式 */
  .icon::before, .icon:after {
    position: absolute;
    content: "";
    z-index: 2;
    background: #fff;
  }
  /* 第一組正方形圖案，由兩個虛擬元素組成，目的在於之後要變化時更有彈性 */
  .icon::before {
    width: 25%;
    height: 50%;
    top: 25%;
    left: 25%;
  }
  .icon::after {
    width: 25%;
    height: 50%;
    top: 25%;
    right: 25%;
  }
  /* 第二組圓形圖案，由左右兩個半圓組成，寬高和第一組都相同，只是運用了不同半徑的圓角樣式 */
  .icon.a::before {
    border-radius: 200% 0 0 200%/ 100% 0 0 100%;
  }
  .icon.a::after {
    border-radius: 0 200% 200% 0/ 0 100% 100% 0;
  }
  /* 第三組圓形圖案，和第一組類似，差別在於左右兩半長方形的寬度不同 */
  .icon.b::before {
    width: 18%;
    height: 50%;
  }
  .icon.b::after {
    width: 18%;
    height: 50%;
  }
  /* 第四組三條槓圖案，運用旋轉 90 度和改變位置，加上陰影的方式產生第三條槓 */
  .icon.c::before {
    width: 12%;
    height: 50%;
    top: 5%;
    left: 45%;
    transform: rotateZ(90deg);
    box-shadow: #fff calc(var(--w)*0.2) 0 0;
  }
  .icon.c::after {
    width: 12%;
    height: 50%;
    top: 45%;
    right: 43%;
    transform: rotateZ(90deg);
  }
  /* 第五組叉叉圖案，透過旋轉和定位，產生叉叉圖案 */
  .icon.d::before {
    top: 20%;
    left: 40%;
    width: 18%;
    height: 60%;
    transform: rotateZ(45deg);
  }
  .icon.d::after {
    top: 20%;
    right: 40%;
    width: 18%;
    height: 60%;
    transform: rotateZ(-45deg);
  }

  /* 第六組三角形圖案，透過旋轉和定位，並搭配邊框製作三角形，組合後就會是完整的三角形 */
  .icon.e::before {
    top: 10%;
    left: 42%;
    width: 0;
    height: 0;
    background: #fff0;
    border-style: solid;
    border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
    border-color: #fff0 #fff #ffff #fff0;
    transform: rotateZ(90deg);
  }
  .icon.e::after {
    top: 40%;
    right: 28%;
    width: 0;
    height: 0;
    background: #fff0;
    border-style: solid;
    border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
    border-color: #fff0 #fff0 #ffff #fff;
    transform: rotateZ(90deg);
  }
</style>

CSS 教學 - CSS ICON 圖示形狀變換 - 使用虛擬元素產生不同的圖示形狀

使用虛擬元素產生不同的圖示形狀動畫

如果要使用虛擬元素製作「動畫效果」會稍微麻煩一點，必須要特別注意動畫影格進度中「固定」與「改變」的樣式，下方範例會將上述的靜態圖示，改成動態變化的效果。

參考：CSS 動畫 animation

線上展示：https://codepen.io/oxxo/pen/WbNqRBL

<!-- HTML 程式碼 -->
<div class="icon"></div>


<!-- CSS 程式碼 -->
<style>
  .icon {
    --w: 250px;
    position: relative;
    width: var(--w);
    height: var(--w);
    background: #f55;
    border-radius: 50%;
    margin: 50px;
  }
  .icon::before, .icon:after {
    position: absolute;
    content: "";
    z-index: 2;
    background: #fff;
    border-style: solid;
    border-width: 0;
    border-color: #fff;
  }
  .icon::before {animation: oxxo-b 12s infinite;}
  .icon::after {animation: oxxo-a 12s infinite;}

  @keyframes oxxo-b {
    /* 第一組，正方形 */
    0%, 100% {
      width: 25%;
      height: 50%;
      top: 25%;
      left: 25%;
      background: #fff;
      box-shadow: #fff 0 0 0;
      border-width: 0;
      border-color: #fff0;
      transform: rotateZ(0);
    }
    13% {
      border-radius: 0;
    }  
    /* 第二組，圓形 */
    16.5% {
      border-radius: 200% 0 0 200%/ 100% 0 0 100%;
    }      
    29.5% {
      width: 25%;
      height: 50%;
      top: 25%;
      left: 25%;
      border-radius: 200% 0 0 200%/ 100% 0 0 100%;
    } 
    /* 第三組，兩條槓 */
    33% {
      width: 18%;
      height: 50%;
      top: 25%;
      left: 25%;
      border-radius: 0;
    } 
    46% {
      width: 18%;
      height: 50%;
      top: 25%;
      left: 25%;
      transform: rotateZ(0);
      box-shadow: #fff 0 0 0;
    }
    /* 第四組，三條槓 */
    49.5% {
      width: 12%;
      height: 50%;
      top: 5%;
      left: 45%;
      transform: rotateZ(90deg);
      box-shadow: #fff calc(var(--w)*0.2) 0 0;
    }
    62.5% {
      width: 12%;
      height: 50%;
      top: 5%;
      left: 45%;
      transform: rotateZ(90deg);
      box-shadow: #fff calc(var(--w)*0.2) 0 0;
    }
    /* 第五組，叉叉 */
    66% {
      top: 20%;
      left: 40%;
      width: 18%;
      height: 60%;
      box-shadow: #fff 0 0 0;
      transform: rotateZ(45deg);
    }
    79% {
      top: 20%;
      left: 40%;
      width: 18%;
      height: 60%;
      background: #fff;
      box-shadow: #fff 0 0 0;
      border-width: 0;
      border-color: #fff0;
      transform: rotateZ(45deg);
    }
    /* 第六組，三角形 */
    82.5% {
      top: 10%;
      left: 42%;
      width: 0;
      height: 0;
      background: #fff0;
      border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
      border-color: #fff0 #fff #ffff #fff0;
      transform: rotateZ(90deg);
    }
    95.5% {
      top: 10%;
      left: 42%;
      width: 0;
      height: 0;
      background: #fff0;
      border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
      border-color: #fff0 #fff #ffff #fff0;
      transform: rotateZ(90deg);
    }
    
  }
  @keyframes oxxo-a {
    /* 第一組，正方形 */
    0%, 100% {
      width: 25%;
      height: 50%;
      top: 25%;
      right: 25%;
      background: #fff;
      box-shadow: #fff 0 0 0;
      border-width: 0;
      border-color: #fff0;
    }  
    13% {
      border-radius: 0;
    } 
    /* 第二組，圓形 */
    16.5% {
      border-radius: 0 200% 200% 0/ 0 100% 100% 0;
    } 
    29.5% {
      width: 25%;
      height: 50%;
      top: 25%;
      right: 25%;
      border-radius: 0 200% 200% 0/ 0 100% 100% 0;
    } 
    /* 第三組，兩條槓 */
    33% {
      width: 18%;
      height: 50%;
      top: 25%;
      right: 25%;
      border-radius: 0;
    }
    46% {
      width: 18%;
      height: 50%;
      top: 25%;
      right: 25%;
      transform: rotateZ(0);
    }
    /* 第四組，三條槓 */
    49.5% {
      width: 12%;
      height: 50%;
      top: 45%;
      right: 43%;
      transform: rotateZ(90deg);
    }
    62.5% {
      width: 12%;
      height: 50%;
      top: 45%;
      right: 43%;
      transform: rotateZ(90deg);
    }
    /* 第五組，叉叉 */
    66% {
      top: 20%;
      right: 40%;
      width: 18%;
      height: 60%;
      transform: rotateZ(-45deg);
    }  
    79% {
      top: 20%;
      right: 40%;
      width: 18%;
      height: 60%;
      background: #fff;
      box-shadow: #fff 0 0 0;
      border-width: 0;
      border-color: #fff0;
      transform: rotateZ(-45deg);
    }
    /* 第六組，三角形 */
    82.5% {
      top: 40%;
      right: 28%;
      width: 0;
      height: 0;
      background: #fff0;
      border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
      border-color: #fff0 #fff0 #ffff #fff;
      transform: rotateZ(90deg);
    }
    95.5% {
      top: 40%;
      right: 28%;
      width: 0;
      height: 0;
      background: #fff0;
      border-width: calc(var(--w)*0.25) calc(var(--w)*0.15);
      border-color: #fff0 #fff0 #ffff #fff;
      transform: rotateZ(90deg);
    }
  }
</style>

CSS 教學 - CSS ICON 圖示形狀變換 - 使用虛擬元素產生不同的圖示形狀動畫

使用 clip-path 產生不同的圖示形狀

相較於虛擬元素需要不斷計算位置尺寸才能組合出特定形狀，使用 clip-path 就能快速產生不同的圖示形狀，程式碼也會減少非常多，下方範例會運用 polygon 的做法，搭配圓角半徑，實作六種不同的圖示形狀。

參考：CSS 裁切路徑 clip-path

線上展示：https://codepen.io/oxxo/pen/dPyBNBW

<!-- HTML 程式碼 -->
<div class="icon a"></div>
<div class="icon b"></div>
<div class="icon c"></div>
<div class="icon d"></div>
<div class="icon e"></div>
<div class="icon f"></div>

<!-- CSS 程式碼 -->
<style>
  .icon {
    --w: 150px;
    position: relative;
    width: var(--w);
    height: var(--w);
    background: #f55;
    border-radius: 50%;
    margin: 20px 10px;
    float: left;
  }
  /* 預設全部都是正方形 */
  .icon::before {
    position: absolute;
    content: "";
    z-index: 2;
    background: #fff;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
  }
  /* 圓形 */
  .b::before {
    border-radius: 50%;
  }
  /* 兩條槓 */
  .c::before {
    border-radius: 0;
    clip-path: polygon(0 0, 40% 0, 40% 50%, 60% 50%, 60% 0, 100% 0,
                100% 100%, 60% 100%, 60% 50%, 40% 50%, 40% 100%,0 100%);
  }
  /* 三條槓 */
  .d::before {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 25%, 0% 25%,
                      0 37.5%, 100% 37.5%, 100% 62.5%, 0 62.5%,
                      0 75%, 100% 75%, 100% 100%, 0 100%);
  }
  /* 叉叉 */
  .e::before {
    border-radius: 0;
    clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 
      100% 80%, 80% 100%, 50% 70%,20% 100%, 0% 80%, 30% 50%, 0% 20%);
  }
  /* 三角形 */
  .f::before {
    border-radius: 0;
    clip-path: polygon(20% 0, 20% 0, 20% 0, 20% 0,
                      100% 50%, 100% 50%, 100% 50%, 100% 50%,
                      20% 100%,20% 100%,20% 100%,20% 100%);
  }
</style>

CSS 教學 - CSS ICON 圖示形狀變換 - 使用 clip-path 產生不同的圖示形狀

使用 clip-path 產生不同的圖示形狀動畫

能夠運用 clip-path 產生形狀後，就能將這些形狀組合成動畫效果，但需要自行調整不同節點的位置，使其更符合動畫的過程，下方範例會讓六種形狀互相變換。

參考：CSS 動畫 animation

線上展示：https://codepen.io/oxxo/pen/jEOjyjJ

<!-- HTML 程式碼 -->
<div class="icon"></div>

<!-- CSS 程式碼 -->
<style>
  .icon {
    --w: 300px;
    position: relative;
    width: var(--w);
    height: var(--w);
    background: #f55;
    border-radius: 50%;
    margin: 50px;
  }
  .icon::before {
    position: absolute;
    content: "";
    z-index: 2;
    background: #fff;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    animation: oxxo 12s infinite linear;
  }

  @keyframes oxxo {
    0%, 100% {
      border-radius: 0;
      clip-path: polygon(0 0, 0 0, 0 0,
                        100% 0, 100% 0, 100% 0,
                        100% 0100%, 100% 100%, 100% 100%,
                        0 100%, 0 100%, 0 100%);
    }
    13% {
      border-radius: 0;
      clip-path: polygon(0 0, 0 0, 0 0,
                        100% 0, 100% 0, 100% 0,
                        100% 0100%, 100% 100%, 100% 100%,
                        0 100%, 0 100%, 0 100%);
    }
    
    16.5% {
      border-radius: 50%;
      clip-path: polygon(0 0, 0 0, 0 0,
                        100% 0, 100% 0, 100% 0,
                        100% 0100%, 100% 100%, 100% 100%,
                        0 100%, 0 100%, 0 100%);
    }
    29.5% {
      border-radius: 50%;
      clip-path: polygon(0 0, 0 0, 0 0,
                        100% 0, 100% 0, 100% 0,
                        100% 0100%, 100% 100%, 100% 100%,
                        0 100%, 0 100%, 0 100%);
    }
    
    33% {
      border-radius: 0;
      clip-path: polygon(0 0, 40% 0, 40% 50%, 60% 50%, 60% 0, 100% 0,
                  100% 100%, 60% 100%, 60% 50%, 40% 50%, 40% 100%,0 100%);
    }
    46% {
      border-radius: 0;
      clip-path: polygon(0 0, 40% 0, 40% 50%, 60% 50%, 60% 0, 100% 0,
                  100% 100%, 60% 100%, 60% 50%, 40% 50%, 40% 100%,0 100%);
    }
    
    49.5% {
      border-radius: 0;
      clip-path: polygon(0 0, 100% 0, 100% 25%, 0% 25%,
                        0 37.5%, 100% 37.5%, 100% 62.5%, 0 62.5%,
                        0 75%, 100% 75%, 100% 100%, 0 100%);
    }
    62.5% {
      border-radius: 0;
      clip-path: polygon(0 0, 100% 0, 100% 25%, 0% 25%,
                        0 37.5%, 100% 37.5%, 100% 62.5%, 0 62.5%,
                        0 75%, 100% 75%, 100% 100%, 0 100%);
    }
    
    66% {
      border-radius: 0;
      clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 
        100% 80%, 80% 100%, 50% 70%,20% 100%, 0% 80%, 30% 50%, 0% 20%);
    }
    79% {
      border-radius: 0;
      clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 
        100% 80%, 80% 100%, 50% 70%,20% 100%, 0% 80%, 30% 50%, 0% 20%);
    }
    
    82.5% {
      border-radius: 0;
      clip-path: polygon(20% 0, 20% 0, 20% 0, 20% 0,
                        100% 50%, 100% 50%, 100% 50%, 100% 50%,
                        20% 100%,20% 100%,20% 100%,20% 100%);
    }
    95.5% {
      border-radius: 0;
      clip-path: polygon(20% 0, 20% 0, 20% 0, 20% 0,
                        100% 50%, 100% 50%, 100% 50%, 100% 50%,
                        20% 100%,20% 100%,20% 100%,20% 100%);
    }
  }
</style>

CSS 教學 - CSS ICON 圖示形狀變換 - 使用 clip-path 產生不同的圖示形狀動畫

小結

透過 CSS 製作圖示形狀其實不困難，通常都是花費許多時間在「繪製形狀」，只要知道形狀的節點或位置，就可以輕鬆地透過 CSS 控制形狀變換囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 空心文字、文字水波背景 左右傾斜的背景效果 Icon 圖示形狀變換 故障文字效果 按鈕的多種 hover 效果 點擊展開或收折的選單 點擊愛心圖案放射效果 純 CSS 碼表 ( 可計時 )