CSSの::before、::after疑似要素を使って作るパンくずリストと進捗確認（steps）です。サンプルのオリジナルは英文で、それを日本語表記にするため、HTML、CSSともに手を加えています。

パンくずリスト

• Home
• 会社案内
• 業務実績一覧
• 年度別業務実績
• 2016年度

パンくずリストのHTMLソース

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">会社案内</a></li>
  <li><a href="#">業務実績一覧</a></li>
  <li><a href="#">年度別業務実績</a></li>
  <li><a href="#">2016年度</a></li>
</ul>

 

進捗確認（steps）リスト

• Step 1：納品先選択
• Step 2：商品選択
• Step 3：カートの内容
• Step 4：確認
• Step 5：完了

進捗確認（steps）リストのHTMLソース

<ul class="steps steps-5">
  <li><a href="#" title=""><b>Step&nbsp;1：</b><span>納品先選択</span></a></li>
  <li><a href="#" title=""><b>Step&nbsp;2：</b><span>商品選択</span></a></li>
  <li class="current"><a href="#" title=""><b>Step&nbsp;3：</b><span>カートの内容</span></a></li>
  <li><a href="#" title=""><b>Step&nbsp;4：</b><span>確認</span></a></li>
  <li><a href="#" title=""><b>Step&nbsp;5：</b><span>完了</span></a></li>
</ul>

CSSソース（パンくずリストと進捗確認リスト）

.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  margin: 10px 40px;
  padding: 0;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 55px;
  background: brown;
  background: hsla(34,85%,35%,1); 
  position: relative; 
  display: block;
  float: left;
}
.breadcrumb li a:after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; 
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(34,85%,35%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}   
.breadcrumb li a:before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}   
.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}
.breadcrumb li:last-child a:after { border: 0; }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

/* -------------- */
.steps {
  margin: 10px 40px;
  padding: 0;
  overflow: hidden;
}
.steps a {
  color: white;
  text-decoration: none;
}
.steps li {
  float: left;
  margin-left: 0;
  width: 140px;
  height: 70px;
  list-style-type: none;
  padding: 10px 5px 5px 30px; 
  border-right: 3px solid white;
  position: relative;
}
.steps li:first-child {
  padding-left: 5px;
}
.steps li:nth-child(n+2)::before {
  position: absolute;
  top:0;
  left:0;
  display: block;
  border-left: 25px solid white; 
  border-top: 40px solid transparent; 
  border-bottom: 40px solid transparent;
  width: 0;
  height: 0;
  content: " ";
}
.steps li::after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: -25px;
  display: block;
  border-left: 25px solid #7c8437; 
  border-top: 40px solid transparent; 
  border-bottom: 40px solid transparent; 
  width:0;
  height:0;
  content: " ";
}
.steps li { background-color: #7C8437; }
.steps li::after { border-left-color: #7c8437; }
.steps li.current { background-color: #C36615; }
.steps li.current::after { border-left-color: #C36615; }
.steps li.current ~ li { background-color: #ccc; }
.steps li.current ~ li::after { border-left-color: #ccc; }
.steps li:hover {background-color: #696}
.steps li:hover::after {border-left-color: #696}
.steps li b {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
}
.steps li b, .steps li span{
	margin-left:10px;
}
.arrows { white-space: nowrap; }
.arrows li {
    display: inline-block;
    line-height: 26px;
    margin: 0 9px 0 -10px;
    padding: 0 20px;
    position: relative;
}
.arrows li::before,
.arrows li::after {
    border-right: 1px solid #666666;
    content: '';
    display: block;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    transform: skewX(45deg);   
}
.arrows li::after {
    bottom: 0;
    top: auto;
    transform: skewX(-45deg);
}
.arrows li:last-of-type::before, 
.arrows li:last-of-type::after { 
    display: none; 
}
.arrows li a { 
   letter-spacing: -1px; 
   text-decoration: none;
}
.arrows li:nth-of-type(1) a { color: hsl(0, 0%, 70%); } 
.arrows li:nth-of-type(2) a { color: hsl(0, 0%, 65%); } 
.arrows li:nth-of-type(3) a { color: hsl(0, 0%, 50%); } 
.arrows li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }