Previous question: Convert image to CSS
.counter{color:#fff;font-family:Tahoma;font-size:60px;font-weight:700;letter-spacing:12px;line-height:63px;padding:0 0 0 6px;height:70px;margin-top:-1px;position:relative;width:105px}
.cro_azul {
display: block;
width: 50px;
height: 67px;
background-color: #0000ff;
background-image: radial-gradient(circle at top left, blue 0%,rgba(255,255,255,0.5) 60%, blue 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
}
.cro_azul::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #0000ff;
background-image: radial-gradient(circle at top left, blue 0%,rgba(255,255,255,0.5) 60%, blue 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
}
.cro_vermelho {
display: block;
width: 50px;
height: 67px;
background-color: #e60000;
background-image: radial-gradient(circle at top left, #e60000 0%,rgba(255,255,255,0.5) 60%, #e60000 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.15) inset;
}
.cro_vermelho::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #e60000;
background-image: radial-gradient(circle at top left, #e60000 0%,rgba(255,255,255,0.5) 60%, #e60000 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.15) inset;
}
.cro_cinza {
display: block;
width: 50px;
height: 67px;
background-color: #bfbfbf;
background-image: radial-gradient(circle at top left, #bfbfbf 0%,rgba(255,255,255,0.5) 60%, #bfbfbf 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.10) inset;
}
.cro_cinza::before {
content: "";
display: block;
width: 50px;
height: 67px;
background-color: #bfbfbf;
background-image: radial-gradient(circle at top left, #bfbfbf 0%,rgba(255,255,255,0.5) 60%, #bfbfbf 61%);
background-repeat: no-repeat;
background-size: 150% 90%;
background-position: top -15px left 0;
border-radius: 4px;
position: absolute;
left: 51px;
box-shadow: 0 0 10px rgba(0,0,0,0.10) inset;
} <div class="counter cro_azul">15</div><br>
<div class="counter cro_vermelho">15</div><br>
<div class="counter cro_cinza">15</div>This is a regressive timer, so numbers are always changed.
I have the following problem: it is not displaying the whole number in the two rectangles, actually this, but the second rectangle is superimposed on the number 5 .
What alternative could I use to correct this problem?
The class needs to be exactly with the word " counter ", and the number can not be separated because it appears integer inside the DIV. In case it would not be possible to display the number by CSS.