How do I create triangle shaped vertical breadcrumbs

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><a href="#">title</a></li>
    <li><a href="#">title</a></li>
    <li><a href="#">title</a></li>
    <li><a href="#">title</a></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/