Turning a horizontal breadcrumbs navigation, vertical - html

Question

This might be a but too much to ask, but I am at my limits here.
I have this (http://jsfiddle.net/3whTa/) piece of CSS, that creates an arrow horizontal breadcrumbs navigation.
What I want to do is convert it to vertical. As in, the arrows points down on eachother, but text is still horizontal (would have to be resized then).
How is this possible? Also, I have tried searching around for a navigation like this, but I havent found anything, so a point in the right direction would be just as helpful.
You can see it in action, and the code in the linked jsfiddle above, but i will paste it in here as well:
HTML
<ul id="breadcrumbs-two">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
CSS
#breadcrumbs-two{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: #99db76;
}
#breadcrumbs-two .current::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current::before{
border-color: #99db76 #99db76 #99db76 transparent;
}

Answer 1

or this css:
ul
{
padding-left:0;
width:100px;
}
ul li
{
display:block;
height:30px;
margin-bottom:8px;
position:relative;
background:gray;
}
ul li:before
{
content:'';
top:-1px;
left:10px;
border:1px solid blue;
border-width:4px 40px 20px 40px;
border-color: white transparent transparent transparent;
position:absolute;
}
ul li:first-child:before
{
border:none;
}
ul li:after
{
content:'';
bottom:-26px;
left:10px;
border:1px solid blue;
border-width:6px 40px 20px 40px;
border-color: red transparent transparent transparent;
position:absolute;
}
ul li:last-child:after
{
border:none;
}
for very simple arrows with less than a right angle. But IMHO it doesnt look good. Better will be to use small arrow with right angle and place it into middle of the block. Especially if you need more then only one word as a text.

Answer 2

I did something like this a little while ago...but I'm sure there is more than one way. Here's my first attempt.
Codepen Demo
HTML
<nav role='navigation'>
<ul>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
</nav>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style:none;
margin:25px;
}
li {
text-align:center;
margin-bottom:25px;
position:relative;
background:darkblue;
width:50px;
}
li:hover {
background:green;
}
a {
text-decoration:none;
font-weight:bold;
display:block;
color:white;
height:50px;
line-height:75px;
position:relative;
font-size:0.75em;
}
li:before,
li:after {
position:absolute;
content:"";
left:0;
border:25px solid transparent;
height:0;
width:0;
z-index: 25;
}
li:before {
top:0;
border-top-color:white;
}
li:after {
top:100%;
border-top-color:darkblue;
}
li:hover:after {
border-top-color:green;
}