Breadcrumb like Battlefield 4 Website

Hello Guys & Girls,

I’ve been working on my first Teamplate with WordPress and learning PHP and CSS as I go, but I’ve hit a wall.

I like the Battlefield 4 style breadcrumb but for the life of me can’t figure it out in css. Below is what I’ve written so far but it’s bad.

/* BREADCRUMB */
#breadcrumb { float: left; color: #FFFFFF; }
#breadcrumb-div { margin-left: auto; margin-right: auto; }
#breadcrumb{ overflow: hidden; margin-top: 114px; height: 20px; }
#breadcrumb li{ float: left; }
#breadcrumb a{ background: #15191D; opacity: 0.50; float: left; color: #FFFFFF; position: relative; }
#breadcrumb a:hover{ background: #15191D; opacity: 0.50; }
#breadcrumb a::before{ content: ""; position: absolute; border-style: solid; border-color: #15191D; opacity: 0.50; }
#breadcrumb a:hover::before{ border-color: #FFF #FFF #FFF transparent; }
#breadcrumb a::after{ content: ""; position: absolute; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #15191D; opacity: 0.50; margin-right: 1px; }
#breadcrumb a:hover::after{ border-left-color: #15191D; opacity: 0.50; }
#breadcrumb .current,
#breadcrumb .current:hover{ font-weight: bold; background: none; }
#breadcrumb .current::after,
#breadcrumb .current::before{ content: normal; }
#breadcrumbHome { padding: 0 0 0 22px; }

If anyone could take a look and correct the coding, that would be appreciated greatly.

This is how it looks so far
[IMG]https://i62.tinypic.com/b808rd.png[/IMG]

This is how it should look
[IMG]https://i57.tinypic.com/156y6w8.png[/IMG]