デジタル数字表示CSS

背景

デジタル数字表がCSSのみで出来たら楽しいかなぁと思ったので作ってみました。
完全な個人的な備忘録になります。

ただ、@n4o847 様の記事のヤツのほうがかっこいいです…要素1つですし…
@n4o847 様の記事はこちらです！
・CSSを駆使してDIV要素１つでデジタル数字を作る

完成品

完成品はこちらになります。

See the Pen seven-segment display CSS by hashito (@hashito) on CodePen.

コーディング

棒部分

私は1つの棒毎に要素を割り当てて書いてみました。

.b{
  transform:translateX(0px) translateX(0px);
  background-color:var(--font-color);  
  height:var(--line-h-body);
  width:var(--line-w);
  top:var(--line-h-tr);
  position:absolute;
}
.b:before{
  position:relative;
  content  :"";
  display:block;
    width: 0;
    height: 0;
  top:calc(var(--line-h-tr)*-2);
    border-top:    var(--line-h-tr) solid transparent;
    border-right:  var(--line-h-tr) solid transparent;
    border-bottom: var(--line-h-tr) solid var(--font-color);
    border-left:   var(--line-h-tr) solid transparent;
}
.b:after{
  position:relative;
  content  :"";
  display:block;
    width:0;
    height:0;
  top:calc(var(--line-h-body) - var(--line-h-tr)*2);
    border-top:    var(--line-h-tr) solid var(--font-color);
    border-right:  var(--line-h-tr) solid transparent;
    border-bottom: var(--line-h-tr) solid transparent;
    border-left:   var(--line-h-tr) solid transparent;
}

数値化

各要素に数値クラスn0~n9を割り当てて表示しました。
※ここも変数にしたかった…

.num .b:nth-child(1){top: 30px;  left:10px; }
.num .b:nth-child(2){top:-10px;  left:45px; transform:rotate(90deg);}
.num .b:nth-child(3){top: 30px;  left:80px; }
.num .b:nth-child(4){top: 70px;  left:45px; transform:rotate(90deg);}
.num .b:nth-child(5){top:110px;  left:10px; }
.num .b:nth-child(6){top:110px;  left:80px; }
.num .b:nth-child(7){top:150px;  left:45px; transform:rotate(90deg);}

.n0 .b:nth-child(1){}
.n0 .b:nth-child(2){}
.n0 .b:nth-child(3){}
.n0 .b:nth-child(4){display:none;}
.n0 .b:nth-child(5){}
.n0 .b:nth-child(6){}
.n0 .b:nth-child(7){}