Question

我正在尝试实现这样的事情。我在椭圆形块内有四个块。每个内部块除了最后一个内部块在形状v的右侧具有边框。当任何内部块被悬停时，它被着色为。

实施它的最佳方式是什么？ - 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

您可以在导航dispatch_async(dispatch_get_main_queue()) { // reload table view }元素中添加:after和:before元素。
使用边框创建箭头形状将它们都放在左边。只需向左移动一个1px以获得所需的箭头边框：

＆＃13;

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

＆＃13;

Answer 2

看看它是否适合您。您可以根据需要进行修改：

 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

Answer 3

我确实知道这种类型的东西被称为面包屑菜单。一个非常好的入门教程是https://css-tricks.com/triangle-breadcrumbs/

谢谢大家的回复。

创建带箭头形边框的痕迹导航菜单

3 个答案: