搜尋

CSS 電子時鐘數字 ( 七段顯示器數字 )

這篇教學會運用兩種方法，分別是「裁切路徑 clip-path」和「虛擬元素 before 和 after」，製作常見的「電子時鐘數字」( 也可稱作七段顯示器數字，這種效果也可以呈現英文字母 )。

快速導覽：

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 )

裁切路徑 clip-path 製作電子時鐘數字

透過 CSS 的裁切路徑 clip-path 樣式屬性需要先了解電子時鐘的組成架構，參考下圖，如果元素的高度為 20px，左右三角形內縮的距離就是 10px，確定這個架構之後，不論使用何種方式製作，都可以輕鬆駕馭元素形狀。

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 電子時鐘的架構

下方範例會根據電子時鐘架構，將元素裁切出特定的形狀，這個形狀也是組合成電子時鐘的基本形狀。

參考：裁切路徑 clip-path

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

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

<!-- CSS 程式碼 -->
<style>
  .num {
    position: relative;
    margin: 20px;
  }
  .num div{
    width: 100px;
    height: 20px;
    background: #c00;  
    clip-path: polygon(0 50%, 10px 0, 90px 0, 100% 50%, 90px 100%, 10px 100%); /* 裁切路徑  */
    position: absolute;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 電子時鐘的基本形狀

修改 HTML 程式碼，在父元素 div 改成 num 屬性，如此一來只要指定數字就可以產生對應的數位數字，接著按照下方範例修改 CSS，範例中會先將七塊組成元素透過旋轉、定位的方式擺放在特定位置，並根據 num 屬性數字隱藏特定位置的元素，就能產生指定的數字 ( 尺寸可再自行調整，或透過 transform 改變 )。

參考：屬性選擇器

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

<!-- HTML 程式碼 -->
<div num="0"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="5"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="6"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="7"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="9"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  [num] {
    position: relative;
    margin: 20px;
    width: 110px;
    height: 210px;
    float: left;
  }
  /* 數字主要的光棒 */
  [num] div{
    width: 100px;
    height: 20px;
    background: #000;  
    clip-path: polygon(0 50%, 10px 0, 90px 0, 100% 50%, 90px 100%, 10px 100%);
    position: absolute;
  }
  /* 數字主要的光棒：上方 */
  [num] div:nth-of-type(1){
    top: 0;
    left: 0;
  }
  /* 數字主要的光棒：左上 */
  [num] div:nth-of-type(2){
    transform: rotate(90deg);
    top: 52px;
    left: -50px;
  }
  /* 數字主要的光棒：右上 */
  [num] div:nth-of-type(3){
    transform: rotate(90deg);
    top: 52px;
    left: 50px;
  }
  /* 數字主要的光棒：中間 */
  [num] div:nth-of-type(4){top: 104px;}
  /* 數字主要的光棒：左下 */
  [num] div:nth-of-type(5){
    transform: rotate(90deg);
    top: 156px;
    left: -50px;
  }
  /* 數字主要的光棒：右下 */
  [num] div:nth-of-type(6){
    transform: rotate(90deg);
    top: 156px;
    left: 50px;
  }
  /* 數字主要的光棒：正下方 */
  [num] div:nth-of-type(7){top: 208px;}

  /* 數字 1 */
  [num="1"] div:nth-of-type(1),
  [num="1"] div:nth-of-type(2),
  [num="1"] div:nth-of-type(4),
  [num="1"] div:nth-of-type(5),
  [num="1"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 2 */
  [num="2"] div:nth-of-type(2),
  [num="2"] div:nth-of-type(6){
    display:none;
  }
  /* 數字 3 */
  [num="3"] div:nth-of-type(2),
  [num="3"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 4 */
  [num="4"] div:nth-of-type(1),
  [num="4"] div:nth-of-type(5),
  [num="4"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 5 */
  [num="5"] div:nth-of-type(3),
  [num="5"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 6 */
  [num="6"] div:nth-of-type(3){
    display:none;
  }
  /* 數字 7 */
  [num="7"] div:nth-of-type(2),
  [num="7"] div:nth-of-type(4),
  [num="7"] div:nth-of-type(5),
  [num="7"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 9 */
  [num="9"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 0 */
  [num="0"] div:nth-of-type(4){
    display:none;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 裁切路徑 clip-path 製作電子時鐘

虛擬元素 before 和 after 製作電子時鐘數字

除了使用裁切路徑的方式製作，也可以利用虛擬元素 ::before 和 ::after 產生寶石形狀左右的三角形，下圖展示虛擬元素製作三角形的原理，首先把虛擬元素的寬高都設為 0，接著只要設定四個邊框，並將不需要呈現的邊框設為透明色，就能產生漂亮的三角形。

參考：虛擬元素選擇器 ( 偽元素 )、邊框 border

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

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

<!-- CSS 程式碼 -->
<style>
  .num {
    position: relative;  /* 提供子元素絕對定位 */
    margin: 20px;
  }
  .num div {
    width: 80px;
    height: 20px;
    background: #c00;
    position: absolute;  /* 元素絕對定位 */
  }
  .num div::before,
  .num div::after{
    content: "";
    position: absolute;  /* 虛擬元素絕對定位 */
    width: 0;            /* 虛擬元素尺寸為 0 */
    height: 0;
    top: 0;
    border-width: 10px;  /* 虛擬邊框寬度 */
    border-style: solid; /* 虛擬邊框樣式 */
  }
  .num div::before {
    border-color: #0000 #c00 #0000 #0000; /* 左側虛擬元素只有右邊邊框有顏色 */
    left: -20px;
  }
  .num div::after {
    border-color: #0000 #0000 #0000  #c00; /* 右側虛擬元素只有左邊邊框有顏色 */
    right: -20px;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 虛擬元素產生漂亮的三角形

了解原理後，修改 HTML 程式碼，在父元素 div 改成 num 屬性，如此一來只要指定數字就可以產生對應的數位數字，接著按照下方範例修改 CSS，範例中會先將七塊組成元素透過旋轉、定位的方式擺放在特定位置，並根據 num 屬性數字隱藏特定位置的元素，就能產生指定的數字 ( 尺寸可再自行調整，或透過 transform 改變 )。

參考：屬性選擇器

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

<!-- HTML 程式碼 -->
<div num="0"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="5"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="6"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="7"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="9"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>


<!-- CSS 程式碼 -->
<style>
  [num] {
    position: relative;
    margin: 0;
    width: 110px;
    height: 210px;
    float: left;
    transform: scale(60%);
  }
  [num] div {
    width: 80px;
    height: 20px;
    background: #000;
    position: absolute;
  }
  [num] div::before,
  [num] div::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    border-width: 10px;
    border-style: solid;
  }
  [num] div::before {
    border-color: #0000 #000 #0000 #0000;
    left: -20px;
  }
  [num] div::after {
    border-color: #0000 #0000 #0000 #000;
    right: -20px;
  }
  /* 數字主要的光棒：上方 */
  [num] div:nth-of-type(1){
    top: 0;
    left: 0;
  }
  /* 數字主要的光棒：左上 */
  [num] div:nth-of-type(2){
    transform: rotate(90deg);
    top: 52px;
    left: -50px;
  }
  /* 數字主要的光棒：右上 */
  [num] div:nth-of-type(3){
    transform: rotate(90deg);
    top: 52px;
    left: 50px;
  }
  /* 數字主要的光棒：中間 */
  [num] div:nth-of-type(4){top: 104px;}
  /* 數字主要的光棒：左下 */
  [num] div:nth-of-type(5){
    transform: rotate(90deg);
    top: 156px;
    left: -50px;
  }
  /* 數字主要的光棒：右下 */
  [num] div:nth-of-type(6){
    transform: rotate(90deg);
    top: 156px;
    left: 50px;
  }
  /* 數字主要的光棒：正下方 */
  [num] div:nth-of-type(7){top: 208px;}

  /* 數字 1 */
  [num="1"] div:nth-of-type(1),
  [num="1"] div:nth-of-type(2),
  [num="1"] div:nth-of-type(4),
  [num="1"] div:nth-of-type(5),
  [num="1"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 2 */
  [num="2"] div:nth-of-type(2),
  [num="2"] div:nth-of-type(6){
    display:none;
  }
  /* 數字 3 */
  [num="3"] div:nth-of-type(2),
  [num="3"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 4 */
  [num="4"] div:nth-of-type(1),
  [num="4"] div:nth-of-type(5),
  [num="4"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 5 */
  [num="5"] div:nth-of-type(3),
  [num="5"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 6 */
  [num="6"] div:nth-of-type(3){
    display:none;
  }
  /* 數字 7 */
  [num="7"] div:nth-of-type(2),
  [num="7"] div:nth-of-type(4),
  [num="7"] div:nth-of-type(5),
  [num="7"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 9 */
  [num="9"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 0 */
  [num="0"] div:nth-of-type(4){
    display:none;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 虛擬元素 before 和 after 製作電子時鐘

小結

透過「裁切路徑 clip-path」和「虛擬元素 before 和 after」製作電子時鐘都是常見的做法，搭配 CSS 的屬性選擇器也讓程式更加彈性好修改。

意見回饋

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

CSS 教學

基本介紹

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

CSS 選擇器

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

數值與單位

關鍵字與文字數值 長度與角度單位 位置名稱與時間單位

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer )

函式類型

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

顏色與濾鏡

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

文字與段落

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

元素容器

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

背景與陰影

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

清單與表格

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

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

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

Grid 網格排版

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

轉場與動畫

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

變形、裁切與遮罩

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

視窗與使用者行為

捲軸樣式 ( scrollbar ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 漸層色的轉場與動畫 電子時鐘數字 不規則形狀動畫