电子时钟数字

这篇教学会运用两种方法，分别是“裁切路径 clip-path”和“虚拟元素 before 和 after”，制作常见的“电子时钟数字”( 也可称作七段显示器数字，这种效果也可以呈现英文字母 )。

快速导览：

裁切路径 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 选择器

数值与单位

规则与定义

函数类型

颜色与滤镜

文字与段落

元素容器

背景与阴影

清单与表格

基本排版与定位

Flex 弹性排版

Grid 网格排版

转场与动画

变形、裁切与遮罩

视窗与用户行为

CSS 预处理器

范例效果

电子时钟数字

裁切路径 clip-path 制作电子时钟数字

虚拟元素 before 和 after 制作电子时钟数字

小结