デジタル数字表示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){}