创建带有箭头形边框的面包屑菜单 [英] Create a breadcrumb menu with arrow shaped border

问题描述

我正在尝试实现类似这样的东西.我在椭圆形积木里面有四个积木.除最后一个内部块外，每个内部块均在形状v的右侧具有边框.当任何一个内部块都悬停时，其颜色为.

实现它的最佳方法是什么?-

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

  nav ul {填充:0;font-size:0;溢出:隐藏显示:行内块；border-radius:30px;border:2px实心#ace;}丽丽{显示:行内块；}导航{font-size:1rem;位置:相对；显示:行内块；背景:#eee;文字修饰:无；颜色:#555;padding:13px 25px 13px 10px;}导航a:之后，导航a:之前{位置:绝对；内容:"";高度:0;宽度:1px;最高:50％;左:-25px;上边距:-24px;边框:24像素纯色#eee;border-right:0！重要；border-left-color:透明！重要;}导航a:之前{左:-26px;边框:24px实线#555；}/*活动风格*/导航a.active {background:#ace;}导航a.active:after {border-color:#ace;}/*悬停样式*/导航a:悬停{background:#cef;}导航a:hover:after {border-color:#cef;}  

 < nav>< ul>< li>< a href =#"> Home</a></li>< li>< a href =#" class ="active">关于</a></li>< li>< a href =#"&B; Blog</a></li>< li>< a href =#">特惠信息</a></li>< li>< a href =#"> Contact</a></li></ul></nav>  

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

解决方案

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>

这篇关于创建带有箭头形边框的面包屑菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！