Help us understand the problem. What is going on with this article?

デジタル数字表示CSS

More than 1 year has passed since last update.

背景

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

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

完成品

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

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){}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away