html - 创建一个带有箭头形边框的面包屑菜单

Question

我正在尝试实现类似的东西。我在椭圆形 block 内有四个 block 。每个内部 block 除了最后一个在形状 v 的右侧有一个边框。当任何内部 block 悬停时，它是彩色的 .

实现它的最佳方式是什么。 - http://jsfiddle.net/ydxbwhh5/

我可以在这里编写代码-

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

上面的css

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;
}

Answer 1

您可以将 :after 和 :before 元素添加到导航 a 元素。
使用边框创建箭头形状。
将它们都放在左边。只需向左移动 1px 即可获得所需的箭头边框:

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>