Create a breadcrumb menu with arrow shaped border

Question

I am trying to implement something like this. I have four blocks inside the oval shaped block. With each inner block except the last one having a border on the right side of the shape v. When any of the inner block is hovered it is colored.

What could be the best way to implement it. - http://jsfiddle.net/ydxbwhh5/

I could make code upto here-

 Index.html
<ul>
    <li>some Text</li><!-- 
     --><li>Text</li><!-- 
     --><li>Text</li><!-- 
     --><li>Text</li>
</ul>

And the css for the above

body{
    font-size: 1.5em;
    text-align: center;
}

ul{
    text-decoration: none;
    border: green 2px solid;
    border-radius: 24px;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    /*background-color: red;*/
}

ul li{
    display: inline-block;
    min-height: 50px;
    border-right: 5px solid silver;
    padding: 5px;
}

ul li:hover{
    background-color: lightblue;

}

ul li:last-child{
    border-right: none;
    padding-right: 20px;
}

Roko C. Buljan · Accepted Answer · 2015-08-27T10:34:25.880

You can add an :after and :before element to the navigation a element.
Use borders to create the arrow shape.
Place both of them to the left. Just move one 1px more to the left to get the desired arrow border:

nav ul{
  padding:0;
  font-size:0;
  overflow:hidden;
  display:inline-block;
  border-radius:30px;
  border:2px solid #ace;
}
nav li{
  display:inline-block;
}
nav a{
  font-size:1rem;
  position:relative;
  display:inline-block;
  background:#eee;
  text-decoration:none;
  color:#555;
  padding:13px 25px 13px 10px;
}
nav a:after,
nav a:before{
  position:absolute;
  content:"";
  height:0;
  width:1px;
  top:50%;
  left:-25px;
  margin-top: -24px;
  border:      24px solid #eee;
  border-right: 0 !important;
  border-left-color: transparent !important;
}
nav a:before{
  left:-26px;
  border: 24px solid #555;
}
/* ACTIVE STYLES */
nav a.active{background: #ace;}
nav a.active:after{border-color:#ace;}
/* HOVER STYLES */
nav a:hover{background: #cef;}
nav a:hover:after{ border-color:#cef;}

<nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="active">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Special Offers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

do you know why the arrow lines look quite bad in firefox?. In chrome the right side arrow looks very smooth, but in firefox they look very dashed? — coderVishal, Aug 27 '15 at 02:57
@coderVishal fixed the exaggerated padding to `13px 25px 13px 10px`. Now in FF looks the same as in CH. - This is a concept, it's up to you to play with the properties, colors and sizes. If you don't understand the code let me know... — Roko C. Buljan, Aug 27 '15 at 10:35
thanks for the response again. I think there is some issue with my(or all) firefox. The right arrow lines next to the nav list items still look quite dashed in firefox. In chrome they look very smooth,perfectly straight. Any place where i can send the images for you to look?. Or maybe I play around more with the padding, though i dont think it will resolve the issue. — coderVishal, Aug 28 '15 at 02:38

score 1 · Answer 2 · answered Aug 19 '15 at 03:57

See if it works for you. You can modify it according to your need:

 body {
  padding: 40px;
  font-family: Helvetica, sans-serif;
  font-size: 13px; }

  #breadcrumb {
    width:390px;
          border-radius:30px;
    overflow: hidden;
    margin-bottom: 20px;
    line-height: 30px;
    color: #aaa;
    padding: 1px;
    border: 1px solid #F0F0F0; }
    #breadcrumb a {
      display: block;
      float: left;
      background: #F0F0F0;
      padding-right: 10px;
      height: 30px;
      margin-right: 31px;
      position: relative;
      text-decoration: none;
      color: #aaa; }
      #breadcrumb a:last-of-type {
        margin-right: 25px; }
        #breadcrumb a:before {
          content: "";
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: -30px;
          border: 15px solid transparent;
          border-color: #F0F0F0;
          border-left-color: transparent; }
          #breadcrumb a:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            right: -30px;
            border: 15px solid transparent;
            border-left-color: #F0F0F0; }
            #breadcrumb a:first-of-type {
              padding-left: 15px; }
              #breadcrumb a:first-of-type:before {
                display: none; }
      #breadcrumb a:hover {
        background: #00b0ec;
        color: #fff;
        text-decoration: none; }
        #breadcrumb a:hover:before {
          border-color: #00b0ec;
          border-left-color: transparent; }
          #breadcrumb a:hover:after {
            border-left-color: #00b0ec; }

<div id="breadcrumb">
    <a href="#">Home</a>
    <a href="#">Grandpa</a>
    <a href="#">Father</a>
    <a href="#">Son</a>
    Product
</div

thankx really good answer, but can you tell me why you left the last one's hover effect — coderVishal, Aug 19 '15 at 04:00
i had wrote this code in a fiddle in the past. i just copy pasted it for you — sumitmann, Aug 19 '15 at 04:06
@sumitmann *`"i had wrote this code in a fiddle in the past."`*?... http://www.bypeople.com/author/flexdatdexx/ >>> http://www.bypeople.com/simple-css-only-breadcrumb/ — Roko C. Buljan, Aug 19 '15 at 06:58

Create a breadcrumb menu with arrow shaped border

2 Answers2