How do I create triangle shaped vertical breadcrumbs - html

Question

I'm trying to design a vertical breadcrumb. I'm not sure how to do the small triangles on the bottom, I'm hoping that I can do this with css only and not use images. I'm looking at getting the following results:
They should be able to fill with white color just like the element on hover.
You can see my progress on fiddle: http://jsfiddle.net/5jJm3/2/
HTML:
<ul>
<li><div class="link"><p>Link1</p></div></li>
<li><div class="link"><p>Link2</p></div></li>
<li><div class="link"><p>Link3</p></div></li>
<li><div class="link"><p>Link4</p></div></li>
</ul>
CSS:
ul {
width: 100px;
height:500px;
border: 1px solid red;
margin: 0;
padding: 0;
text-align: center;
background: #1c818a;
}
ul li {
width: 100px;
height: 100px;
background: #64c7c7;
color: white;
list-style-type: none;
border-bottom: 3px solid white;
position: relative;
}
ul li:hover {
cursor: pointer;
background: white;
color: #64c7c7;
}
.link {
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -50px;
}
Thanks!

Answer 1

DEMO: http://jsbin.com/zexoq/1
http://jsbin.com/zexoq/2/edit -- better
Multi-line: http://jsbin.com/qebek/2/edit
<ol class="breadcrumbs">
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
</ol>
CSS
.breadcrumbs,
.breadcrumbs * {
box-sizing: border-box;
list-style: none;
margin: 0;
}
.breadcrumbs li { width: 100px }
.breadcrumbs a {
text-decoration: none;
display: block;
height: 100px;
width: 100%;
background: aqua;
text-align: center;
line-height: 105px;
position: relative;
overflow: visible;
}
.breadcrumbs li a { border-bottom: 2px solid #fff }
.breadcrumbs li:last-child { border-bottom: 10px solid blue }
.breadcrumbs li:not(:last-child) a:after {
content: '';
width: 0;
height: 0;
position: absolute;
z-index: 2;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: aqua transparent transparent transparent;
}
.breadcrumbs li:not(:last-child) a:before {
content: '';
width: 0;
height: 0;
position: absolute;
z-index: 1;
bottom: -13px;
left: 50%;
margin-left: -12px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #fff transparent transparent transparent;
}
.breadcrumbs li:hover a {
background:#fff;
}
.breadcrumbs li:hover a:after {
border-top-color:#fff;
}

Answer 2

You can use :before and :after to create the triangle with borders.
Check my code:
ul{
text-align: center;
background: #1c818a;
width:200px;
padding:0;
margin:0;
height:900px;
}
li{
list-style-type: none; margin:0; margin-bottom:-2px;
}
p{margin-top:50px; color:white; font-size:20px;}
.arrow_box {
position: relative;
background: #66c7c5;
border: 2px solid #FFF;
border-left:0;
width:200px;
height:200px;
}
.arrow_box:hover {
background: #FFF;
}
.arrow_box:hover > p{
color: #66c7c5;
}
.normal_box {
position: relative;
background: #66c7c5;
border: 2px solid #FFF;
border-left:0;
width:200px;
height:200px;
}
.normal_box:hover {
background: #FFF;
}
.normal_box:hover > p{
color: #66c7c5;
}
.arrow_box:hover:after{
border-color: rgba(255, 255, 255, 0);
border-top-color: #FFF;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(102, 199, 197, 0);
border-top-color: #66c7c5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-top-color: #FFF;
border-width: 33px;
margin-left: -33px;
}
.arrow_box:nth-of-type(1):before,.arrow_box:nth-of-type(1):after{z-index:4;}
.arrow_box:nth-of-type(2):before,.arrow_box:nth-of-type(2):after{z-index:3;}
.arrow_box:nth-of-type(3):before,.arrow_box:nth-of-type(3):after{z-index:2;}
DEMO: http://jsfiddle.net/4n9hq/