<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.