ENVKV Sign made with pure html and css.
A Pen by Jens Hinrichs on CodePen.
Last active
August 29, 2015 14:26
-
-
Save jensblond/3dc472c68997a8fd0c3f to your computer and use it in GitHub Desktop.
ENVKV
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="envkv" style="width:500px;height:300px;"> | |
| <span class="wert aplus-active">A+</span> | |
| <div class="aplus">A+</div> | |
| <span class="wert a-active">A</span> | |
| <div class="a">A</div> | |
| <span class="wert b-active">B</span> | |
| <div class="b">B</div> | |
| <span class="wert c-active">C</span> | |
| <div class="c">C</div> | |
| <span class="wert d-active">D</span> | |
| <div class="d">D</div> | |
| <span class="wert e-active">E</span> | |
| <div class="e">E</div> | |
| <span class="wert f-active">F</span> | |
| <div class="f">F</div> | |
| <span class="wert g-active">G</span> | |
| <div class="g">G</div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .envkv { | |
| position: absolute; | |
| font-family: sans-serif; | |
| color: white; | |
| font-weight: bold; | |
| div { | |
| font-size: 1rem; | |
| height: 1.1em; | |
| padding: 0.2em 0em 0.2em 0.6em; | |
| position: relative; | |
| margin-bottom: 0.5em; | |
| } | |
| .wert { | |
| background-color: black; | |
| font-size: 1.4rem; | |
| left: 55%; | |
| text-align: right; | |
| width: 15%; | |
| height: 1.4em; | |
| position: absolute; | |
| padding: 0.2em 0.6em 0 0; | |
| margin-top:-0.3em; | |
| display: none; | |
| } | |
| .wert:before { | |
| border-color: rgba(0, 0, 0, 0); | |
| border-right-color: rgb(0,0,0); | |
| } | |
| .aplus { | |
| background-color: rgb(0,128,0); | |
| width: 10%; | |
| } | |
| .aplus:after { | |
| border-color: rgba(0, 128, 0, 0); | |
| border-left-color: rgb(0,128,0); | |
| } | |
| .a { | |
| background-color: rgb(0, 144, 56); | |
| width: 15%; | |
| } | |
| .a:after { | |
| border-color: rgba(0, 144, 56, 0); | |
| border-left-color: rgb(0,144, 56); | |
| } | |
| .b { | |
| background-color: rgb(88, 170, 55); | |
| width: 20%; | |
| } | |
| .b:after { | |
| border-color: rgba(88, 170, 55, 0); | |
| border-left-color: rgb(88,170, 55); | |
| } | |
| .c { | |
| background-color: rgb(200, 210, 0); | |
| width: 25%; | |
| } | |
| .c:after { | |
| border-color: rgba(200, 210, 0, 0); | |
| border-left-color: rgb(200,210, 0); | |
| } | |
| .d { | |
| background-color: rgb(255, 240, 0); | |
| width: 30%; | |
| } | |
| .d:after { | |
| border-color: rgba(255, 240, 56, 0); | |
| border-left-color: rgb(255,240, 56); | |
| } | |
| .e { | |
| background-color: rgb(249, 184, 48); | |
| width: 35%; | |
| } | |
| .e:after { | |
| border-color: rgba(249, 184, 48, 0); | |
| border-left-color: rgb(249,184, 48); | |
| } | |
| .f { | |
| background-color: rgb(233, 103, 34); | |
| width: 40%; | |
| } | |
| .f:after { | |
| border-color: rgba(233, 103, 34, 0); | |
| border-left-color: rgb(233,103, 34); | |
| } | |
| .g { | |
| background-color: rgb(225, 0, 27); | |
| width: 45%; | |
| } | |
| .g:after { | |
| border-color: rgba(225, 0, 27, 0); | |
| border-left-color: rgb(225,0,27); | |
| } | |
| span:before, div:after { | |
| top: 50%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| span:before { | |
| right: 100%; | |
| border-width: 0.82em; | |
| margin-top: -0.82em; | |
| } | |
| div:after { | |
| left: 100%; | |
| border-width: 0.78em; | |
| margin-top: -0.78em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment