Pergunta anterior: Converter imagem para 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>
Trata-se de um cronômetro regressivo, então os números são alterados sempre.
Estou com o seguinte problema: ele não esta exibindo o número inteiro nos dois retângulos, na verdade esta, porém o segundo retângulo esta sobreposto ao número 5.
Que alternativa eu poderia utilizar para corrigir este problema?
É necessário que a classe seja exatamente com o palavra "counter", e o número não pode ser separado, pois ele aparece inteiro dentro da DIV. No caso não seria possível exibir o número pelo CSS.