I want to recreate this little image or code, what ever it is i would like to recreate it.
I was wondering to create something like this:
<section>
<h2>Skills</h2>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>
<p>Design</p>
</section>
Would the rest be CSS or is there anyway to create all this?
Best to mark it up at an unordered list, because that’s kind of a list you have there. Anyhow, you can do this with just CSS if you wish, except that you’d need backgrund images to get that nice texture, but that’s easy enough. Here’s an example of how you could do it with CSS alone:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 0 50px 10px 20px; overflow: hidden;}
li {line-height: 32px; margin: 5px 0; overflow: hidden;}
li.border {
border-top: 0 solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #e5563a;
border-left: 12px solid transparent;
margin: 0 0 20px;
}
li span {width: 315px; position: relative; background: #d4d4d4;}
li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;}
li span, li b {float: left;}
.w100 {width: 95%;}
.w95 {width: 90%;}
.w90 {width: 85%;}
.w85 {width: 80%;}
.w80 {width: 75%;}
.w75 {width: 70%;}
.w70 {width: 65%;}
.w50 {width: 45%;}
.w30 {width: 25%;}
span:before {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid #e7e7e7;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
top:0; right: 0;
}
span:after {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid transparent;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid #e7e7e7;
border-left: 8px solid transparent;
bottom:0; right: 0;
}
</style>
</head>
<body>
<ul>
<li class="border"></li>
<li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
<li><span><i class="w90">Branding</i></span> <b>90%</b></li>
<li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
<li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
<li><span><i class="w70">Typography</i></span> <b>70%</b></li>
<li><span><i class="w50">SEO</i></span> <b>50%</b></li>
<li><span><i class="w30">SEM</i></span> <b>30%</b></li>
<li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
</ul>
</body>
</html>
It would be better not to use an empty LI at the top for the border, but that’s enough for one day.
Based on my last comment above (that it’s better not to use an empty LI for the top border) here’s a better version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 32px 50px 10px 20px; overflow: hidden; position: relative;}
ul:before {
content: "";
width: 348px;
height: 0;
top: 0;
left: 20px;
position: absolute;
border-top: 0 solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #e5563a;
border-left: 12px solid transparent;
}
li {line-height: 32px; margin: 5px 0; overflow: hidden;}
li span {width: 315px; position: relative; background: #d4d4d4;}
li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;}
li span, li b {float: left;}
.w100 {width: 95%;}
.w95 {width: 90%;}
.w90 {width: 85%;}
.w85 {width: 80%;}
.w80 {width: 75%;}
.w75 {width: 70%;}
.w70 {width: 65%;}
.w50 {width: 45%;}
.w30 {width: 25%;}
span:before {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid #e7e7e7;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
top:0; right: 0;
}
span:after {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid transparent;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid #e7e7e7;
border-left: 8px solid transparent;
bottom:0; right: 0;
}
</style>
</head>
<body>
<ul>
<li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
<li><span><i class="w90">Branding</i></span> <b>90%</b></li>
<li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
<li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
<li><span><i class="w70">Typography</i></span> <b>70%</b></li>
<li><span><i class="w50">SEO</i></span> <b>50%</b></li>
<li><span><i class="w30">SEM</i></span> <b>30%</b></li>
<li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
</ul>
</body>
</html>
Here’s an online example (working in Chrome, FF, Safari, Opera, IE9 … but a little off in IE8, and tolerable in IE7):
thank you for the thoughtful response 
i understand how to do it now.
Good work Ralph 
My first thought was mitred borders also.
Thanks Paul. The one thing I couldn’t get right is that in IE8, the blue background overlaps the arrow corners. I set a higher z-index on them, tried every combination I could thing of and still couldn’t get them to sit over the blue part. (I don’t care much about IE8, but still …) The only thing I didn’t try is a negative z-index on the blue <i> element. Maybe will try that later, but IE is sleeping now, and I hate to disturb it.
Hi Ralph,
A negative z-index would work if the blue wasn’t sitting on the light gray because it will go under the light gray and be invisible. IE8 can’t handle the z-index properly on :before or :after and we’ve seen this before a while ago.
You could place the borders in relation to the “i” element instead and sidestep the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 32px 50px 10px 20px; overflow: hidden; position: relative;}
ul:before {
content: "";
width: 348px;
height: 0;
top: 0;
left: 20px;
position: absolute;
border-top: 0 solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #e5563a;
border-left: 12px solid transparent;
}
li {line-height: 32px; margin: 5px 0; overflow: hidden;}
li span {width: 315px; position: relative; background: #d4d4d4;}
li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;position:relative}
li span, li b {float: left;}
.w100 {width: 95%;}
.w95 {width: 90%;}
.w90 {width: 85%;}
.w85 {width: 80%;}
.w80 {width: 75%;}
.w75 {width: 70%;}
.w70 {width: 65%;}
.w50 {width: 45%;}
.w30 {width: 25%;}
i:before {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid #e7e7e7;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
top:0; left: 299px;
}
i:after {
content: "";
position: absolute;
width:0; height: 0;
border-top: 8px solid transparent;
border-right: 8px solid #e7e7e7;
border-bottom: 8px solid #e7e7e7;
border-left: 8px solid transparent;
bottom:0; left: 299px;
}
</style>
</head>
<body>
<ul>
<li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
<li><span><i class="w90">Branding</i></span> <b>90%</b></li>
<li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
<li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
<li><span><i class="w70">Typography</i></span> <b>70%</b></li>
<li><span><i class="w50">SEO</i></span> <b>50%</b></li>
<li><span><i class="w30">SEM</i></span> <b>30%</b></li>
<li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
</ul>
</body>
</html>
It’s a nasty IE8 bug.
Thanks Paul. Jeesh, I even posted in that other thread (not very inspiringly). Shows how little I take in. 
Anyhow, good to know it was just a bug. Hopefully IE8 will fade away faster than IE6 did.