I made a horizontal progress bar that does not have a problem with it
But the progress bar's vertical lines are not correct.
I put a picture of the problem.
HTML
<body>
<div class="progress-bar horizontale">
<div class="inner"><span>|||||||</span></div>
</div>
<div class="progress-bar verticale">
<div class="inner"><span>___ ___ ___ ___ ___</span></div>
</div>
</body>
CSS
body {
background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}
.progress-bar.verticale {
width: 24px;
height: 300px;
/*border: 1px solid #060707;*/
margin: 10px auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
transform: rotate(180deg);
display: inline-block;
}
.progress-bar.horizontale {
width: 300px;
height: 24px;
/*border: 1px solid #060707;*/
margin: auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
display: inline-block;
}
.progress-bar.horizontale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 24px;
width: 200px;
}
.progress-bar.horizontale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/40px sans-serif ;
letter-spacing: -6px;
height: 24px;
opacity: 0.06;
overflow: hidden;
transform: skewX(-30deg);
}
.progress-bar.verticale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 200px;
width: 24px;
}
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 20px/30px sans-serif ;
letter-spacing: -6px;
height: 200px;
width: 20px;
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
}
Here the Picture
Icarus
1,6577 gold badges20 silver badges34 bronze badges
asked Mar 4, 2014 at 16:33
-
2it would be very helpful if you could post the relevant HTML and CSS code...celeriko– celeriko2014年03月04日 16:34:29 +00:00Commented Mar 4, 2014 at 16:34
-
jsfiddle.net/post98/juGXZ/1object json– object json2014年03月04日 16:35:55 +00:00Commented Mar 4, 2014 at 16:35
-
The problem is because lines are not thick enough?user1577303– user15773032014年03月04日 16:46:18 +00:00Commented Mar 4, 2014 at 16:46
-
How can I thicken the lines?object json– object json2014年03月04日 17:01:29 +00:00Commented Mar 4, 2014 at 17:01
2 Answers 2
You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀
A demo.
Edit:
ASCII code of the character: 223 (Top half block).
answered Mar 4, 2014 at 17:36
user1577303user1577303
-
1What is the ASCII character?object json– object json2014年03月04日 18:03:26 +00:00Commented Mar 4, 2014 at 18:03
You can thicken the lines like this:
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar.
letter-spacing: -6px;
height: 200px;
width: 25px; //change width to fit width of div.
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
margin:0px 0px 0px 0px;
bottom: 35px; //Position revision to justify font resizing.
}
answered Mar 4, 2014 at 17:03
lang-html