CSSを駆使してDIV要素１つでデジタル数字を作る
概要
こんな感じのデジタル数字（７セグメント）を、
<!DOCTYPE html>
<style>
/* CSS */
</style>
<div class="display d4"></div>
こんな感じでひとつの要素だけで作ってみようと思います。
方針
こんな感じで分割してみようと思います。
どのセグメントを光らせるかはクラスで指定します。
作成
とりあえず上記の方針に従い4を作ってみます。
.display {
display: inline-block;
box-sizing: border-box;
position: relative;
width: 60px;
height: 100px;
border: solid 4px #111;
background-color: #111;
overflow: hidden;
}
.display::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
transform: translate(-50%, -50%) rotate(45deg);
}
.display::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 12px;
border-top: solid 30px #111;
border-bottom: solid 30px #111;
transform: translate(-50%, -50%);
}
.d4::before {
background-color: #ff0;
box-shadow: -30px -30px #333,
0px -30px #ff0,
-30px 0px #ff0,
0px 30px #333,
30px 0px #ff0,
30px 30px #333;
}
はいできました！
デモ
所感
数値の調整に関してはまだ改善する余地があると思います。
とはいえなんとなく作れてしまったので、CSS恐ろしいです。
Author And Source
この問題について(CSSを駆使してDIV要素１つでデジタル数字を作る), 我々は、より多くの情報をここで見つけました https://qiita.com/n4o847/items/30b0f542f155232bf4d1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .