CodePen

HTML

            
              <ul class="breacrumb">
  <li>foo
  <li>bar
  <li>baz
  <li>quux
</ul>
            
          
!
via HTML Inspector

CSS

            
              body {
  $grad1-1: rgba( 255, 255, 255, .2 );
  $grad1-2: rgba( 255, 255, 255, .35 );
  $grad2-1: rgba( 0, 0, 0, .1 );
  $grad2-2: rgba( 0, 0, 0, .15 );
  
  font-family: sans-serif;
  background: rgb(212, 242, 255);
  background-image:
    linear-gradient( 45deg, $grad1-1 25%, $grad1-2 25%, $grad1-2 50%, $grad1-1 50%, $grad1-1 75%, $grad1-2 75% ),
    linear-gradient( 135deg, $grad2-1 25%, $grad2-2 25%, $grad2-2 50%, $grad2-1 50%, $grad2-1 75%, $grad2-2 75% );
  background-size: 36px 36px;
  text-align: center;
}

.breacrumb {
  list-style: none;
  margin: 30px;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: rgba( 0, 0, 0, .2 );
  display: inline-block;
  border-radius: 15px;
  
  > li {
    display: inline-block;
    padding: 0 30px;
    line-height: 60px;
    background: #3498db;
    position: relative;
    border: 0 #3498db;
    @include transition( background .25s, border-color .25s, margin .125s );
    cursor: pointer;
    
    + li {
      margin-left: 45px;
    }
    
    &:hover {
      background: #fa5ba5;
      border-color: #fa5ba5;
      margin-left: 55px;
      margin-right: 10px;
    }
    
    &:before,
    &:after {
      content: '';
      position: absolute;
      border: 30px solid transparent;
      border-right: 0;
      top: 0;
    }
    
    &:before {
      right: 100%;
      border-top-color: inherit;
      border-bottom-color: inherit;
    }
    
    &:after {
      left: 100%;
      border-left-color: inherit;
    }
    
    &:first-child {
      border-radius: 10px 0 0 10px;
      padding-left: 40px;
      margin-left: 0;
      
      &:before {
        content: none;
      }
    }
    
    &:last-child {
      border-radius: 0 10px 10px 0;
      padding-right: 40px;
      margin-right: 0;
      
      &:after {
        content: none;
      }
    }
  }   
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................