I had to style block corners as in this first image.
I did it with help of extra inner block, using ::before and ::after pseudo-elements of both blocks:
<div class="header__text">
<p>
Lorem ipsum
</p>
</div>
.header__text {
display: inline-block;
vertical-align: top;
margin: 0 auto;
position: relative;
}
.header__text::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
border-top: 1px solid rgba(0, 0, 0, 1);
border-left: 1px solid rgba(0, 0, 0, 1);
}
.header__text::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
border-top: 1px solid rgba(0, 0, 0, 1);
border-right: 1px solid rgba(0, 0, 0, 1);
}
.header__text p {
margin: 0;
padding: 10px 20px;
font-family: Arial, sans-serif;
font-size: 21px;
line-height: 1.2em;
font-weight: 400;
color: #000;
text-transform: none;
text-decoration: none;
letter-spacing: .07em;
text-align: center;
position: relative;
}
.header__text p::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 12px;
height: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 1);
border-left: 1px solid rgba(0, 0, 0, 1);
}
.header__text p::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 1);
border-right: 1px solid rgba(0, 0, 0, 1);
}
jsbin link
Are there any better ways to style it using only css, without extra blocks, images, other auxiliary things? Just pure css.
Thanks.
You could use multiple gradient background-images:
div {
display: inline-block;
background-image:
linear-gradient(90deg, black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)),
linear-gradient(90deg, black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)),
linear-gradient(black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)),
linear-gradient(black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px));
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-repeat: no-repeat;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
p {
margin: 0;
padding: 10px 20px;
}
<div><p>Lorem Ipsum</p></div>
Related
I need to make a box with arrow for a tooltip but I can't use pseudo-elements because :
The box background is a little transparent
It has border
here is the example :
.box {
margin: 60px 0 0 0;
width: 250px;
height: 50px;
background-color: rgba(255, 144, 89, 0.5);
border-radius: 5px;
position: relative;
border: 2px solid #ff6e26;
}
.box:after,
.box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: rgba(255, 144, 89, 0.5);
border-width: 10px;
margin-left: -10px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #ff6e26;
border-width: 12px;
margin-left: -12px;
}
<div class="box"></div>
https://codepen.io/Masoudm/pen/qgvJGX
as you see when I make the background transparent it doesn't works for the arrow, because I already used ::before behind it for its border. I wonder if there is another approach which allows me to keep the box size dynamic.
Update:
the box should be something like this ( except the top curvy line)
Based on this previous answer I will adjust slightly the code to have a transparent background. There is two main tricks. Half the coloration of the pseudo element to avoid the intersection with the main element and the use of gradient on the main element to create the border top and create the hole for the pseudo element:
body {
margin:0;
background-image:linear-gradient(to right,yellow,pink);
}
.box {
border: 2px solid red;
border-top:transparent; /*make border-top transparent*/
margin: 50px;
height: 50px;
position:relative;
/* Use gradient to mimic the border top with a transparent gap */
background:
linear-gradient(red,red) left top /calc(50% - 10px*1.414) 2px,
linear-gradient(red,red) right top/calc(50% - 10px*1.414) 2px,
rgba(0,255,0,0.4);
background-repeat:no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 2px solid red;
border-left: 2px solid red;
top: -11px;
left: calc(50% - 11px);
transform: rotate(45deg);
background:linear-gradient(-45deg,transparent 50%,rgba(0,255,0,0.4) 50%);
}
<div class="box">
</div>
* {
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
padding: 50px;
}
.outter {
width: 200px;
height: 100px;
position: relative;
}
.box {
padding: 20px;
width: 100%;
height: 100%;
background: rgba(255, 68, 0, 0.568);
border: 3px solid orangered;
border-radius: 5px;
clip-path: polygon(0 0,45% 0,45% 10px,calc(45% + 15px) 10px,calc(45% + 15px) 0,100% 0,100% 100%,0 100%,0 0)
}
.arrow {
width: 15px;
height: 8px;
background: rgba(255, 68, 0, 0.568);
transform: translate(-67%, 100%);
position: absolute;
left: 50%;
bottom: 98%;
}
.arrow::after {
border: 3px solid transparent;
border-left-color: orangered;
border-top-color: orangered;
border-right: 0px solid transparent;
border-bottom: 0px solid transparent;
width: 11px;
height: 11px;
position: absolute;
left: 0;
bottom: 34%;
content: '';
transform: rotate(45deg);
background: linear-gradient(134deg,rgba(255, 68, 0, 0.56) 0%,rgba(255, 68, 0, 0.56) 50%,transparent 50%, transparent 100%);
}
<div class="outter">
<div class="arrow"></div>
<div class="box"></div>
</div>
I was looking for a multi component date picker like the one in the image under, but didn't find anything on Github, or elsewhere.
So I decided to make one. I'm having problems implementing the CSS where it fades out on top and bottom.
I thought about using :before and :after in the container, but no success. Can I apply gradients in :before and :after
For example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
<ol>
<li>2010</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ol>
How to make the shadow on top and bottom?
Yes, you can apply gradients in :before and :after elements.
Example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
position: relative;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
ol:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom : 80%;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
ol:after {
position: absolute;
left: 0;
right: 0;
top: 20%;
bottom : 0;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
Ok, got it by using gradients not on :before / :after but in a new div which floats with position: absolute; like:
.fader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 9em;
background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
pointer-events: none;
}
and the HTML:
<div class="date-picker">
<ol>
<li>2010</li>
<li>2011</li>
...
</ol>
<div class="fader"></div>
</div>
jsFiddle: https://jsfiddle.net/bo7dyx83/
Try something like this:
<div class="date-picker">
<ol>
<li>2010</li>
...
</ol>
<div class="shadow"></div>
</div>
With the date-picker styled however you like (setting width and height), and the following CSS:
.date-picker {
position: relative;
width: 8em;
height: 6em;
border: 0.5em solid black;
border-radius: 0.5em;
}
ol {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent, transparent, rgba(0, 0, 0, 0.2));
}
This creates a gradient image overlay positioned in front of the ol which is the image's sibling. Keep in mind that the z-index of .shadow needs to be larger than that of the ol.
EDIT: Looking more closely at the image you posted, the gradient seems closer to quadratic than linear. If you want the list to look more rounded, making a non-linear gradient in photoshop or something would make it look much more three dimensional.
I have the following JSFiddle: http://jsfiddle.net/eotamvwy/
HTML:
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.<p/>
</div>
</div>
How can I modify the CSS so that it is responsive?
I have a div which has the following style:
width: 98%
padding: 0 1% 0 1%
I want to insert the infobox-container inside and stretch it 100% and resize based on the above div.
Use percentage units for responsiveness and for triangles you don't need extra elements, you could use :after and :before :pseudo-elements on .infobox h3.
Updated Fiddle
body {
width: 100%;
margin: 0;
}
.main-container {
width: 98%;
padding: 0 1% 0 1%;
text-align: center;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
}
.infobox {
width: 80%;
padding: 10px 5px 5px 5px;
margin: 10px;
position: relative;
z-index: 1;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top, #6a6a6a, #424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 22px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox h3:before,
.infobox h3:after {
content: '';
border-color: transparent #2083c2 transparent transparent;
border-style: solid;
border-width: 12px;
height: 0;
width: 0;
position: absolute;
left: -12px;
top: 100%;
transform: translateY(-50%);
z-index: -1;
/* displayed under infobox */
}
.infobox h3:after {
border-color: transparent transparent transparent #2083c2;
left: 100%;
margin-left: -12px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover,
.infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="main-container">
<div class="infobox-container">
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
</div>
If you want this header ribbon to be responsive, you need to get away from using fixed-widths and instead combine width:100%; and max-width: 270px; (or whatever).
When you define the width attribute to be 270px, you are telling the browser you want this particular element to have both a minimum and maximum width of 270px. If you are thinking responsively, what you actually want is for your element to expand as much as possible (width:100%), but to max-out at 270px (max-width: 270px;).
Thats the responsive bit.
What you are actually after is something closer to this:
http://jsfiddle.net/TheIronDeveloper/eotamvwy/3/
* {
box-sizing: border-box;
}
.infobox-container {
position: relative;
display: block;
margin: 0;
padding: 0;
max-width: 500px;
width: 100%;
}
.infobox {
padding: 3em 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox-ribbon {
position: absolute;
top: 10px;
width: 100%;
color: #fff;
padding: 10px 5px;
margin: 0;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<h3 class="infobox-ribbon">This is the Header</h3>
<div class="infobox">
<p>This is the content of the infobox.</p>
</div>
</div>
I did a few things here:
I applied * {box-sizing:border-box;}, which does a nicer job at making elements "mold" to the widths that I tell them to (regardless of margins), more details here
I took the h3 ribbon out of the infobox, and changed its position to absolute. My reasoning is that the h3-ribbon needs to conform to the info-box container's width, not the infobox itself. That way, regardless of the width, the ribbon will conform to its parent, and the infobox can occupy its 100% + margins (which should always be even on both sides.)
And like I mentioned before, I changed the fixed-width of the infobox-container to width:100%;max-width:500px;. If you try resizing down, the ribbon stays in place.
I think you can just make a couple of small changes to make all the sizes responsive at least to the content:
The most important changes:
Use 'Calc' to set the width. Support is reasonable well (see caniuse), but you could also solve this differently using negative margins (or probably other ways as well).
.infobox h3 {
width: calc(100% + 20px);
}
The right arrow can simply be solved by setting right to -12px, just as the left one has left: -12px.
.infobox-container .triangle-r {
right: -12px;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
padding: 10px 5px 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 20px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -13px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Headewefewfewfewfewfewfewfr</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.
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.
jsfiddle.net/post98/juGXZ/1/
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
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).
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.
}