<!-- http://www.spiceforms.com/blog/create-breadcrumb-navigation-with-css3/ -->

<div class="my-breadcrumbs">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Product</a></li>
 <li><a href="#">Contact</a></li>
  
 </ul>
</div>

<div class="diagonal-stripes"></div>
.my-breadcrumbs {
  width: 100%;
    margin-top: 50px;
    margin-left: 300px;
  overflow: hidden;

    ul{
        li{
            list-style:none;

            a{
                display: block;
                float: left;
                height: 50px;
                background: #4060A5;
                text-align: center;
                padding: 30px 40px 0 40px;
                position: relative;
                margin: 0 45px 0 0;
                font-family: "Open Sans", Helvetica, Arial, sans-serif;
                font-size: 20px;
                text-decoration: none;
                color: #fff;

                &:after,
                &:before {
                    content: "";
                    position: absolute;
                }

                &:after {
                    border-top: 40px solid transparent;
                    border-bottom: 40px solid transparent;
                    border-left: 40px solid #4060A5;
                    top: 0;
                    right: -40px;
                }

                &:before {
                    margin-top: -30px;
                    border-width: 40px 0 40px 40px;
                    border-style: solid;
                    border-color: #4060A5 #4060A5 #4060A5 transparent;
                    left: -40px;
                }
            }
        }
    }
}

/** 
 * Diagonal stripes
 */
.diagonal-stripes{
  margin-top: 50px;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(#4060A5,1) 25px, rgba(#4060A5,1) 50px);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.