ENVKV Sign made with pure html and css.
A Pen by Jens Hinrichs on CodePen.
ENVKV Sign made with pure html and css.
A Pen by Jens Hinrichs on CodePen.
<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> |
.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; | |
} | |
} |