Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
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){}
hashito
わたしです。 主に個人的なメモです。
https://hashito.biz/
Why not register and get more from Qiita?
  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