Question

enter image description here

我有一个使用display:table-cell;创建的菜单项，以确保在用户展开屏幕时菜单标签“延长”。但是我需要完成标签的右侧以完成顶部的圆角。我有一个单独的tabRight.png，它由选项卡右侧的一部分组成。我需要在每个“标签打开”之前放置这个。我已经筋疲力尽了我所知道的一切，我在网上找到的关门方法并不适合这种情况。右侧应该有一个透明的角落，所以我认为我不能把它放在现有的灰色背景上。

代码是：

CSS：

#nav ul{
    display:table;
    width:100%;
    border-spacing: 10px;
    margin:0;
    padding:0;
}
#nav li{
    width:20%;
    display:table-cell;
    background: url('tab.png') no-repeat;
    color:#000;
    text-align:center;
    height:31px;
}
#nav a{
    display:block;
    text-decoration:none;
    color:black;
}

p{
    padding:0px;
    margin:0px;
}

HTML：

<div id="nav">
<ul>
    <li>
        <a href="http://www.google.com">
        <div>
            <img src="address.png"/>
            <p>Deadlines</p>
        </div>
        </a>    
    </li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
</ul>
</div>

编辑：

我尝试了after方法，并且透明部分与左背景重叠，因此背景显示了透明度，这是我害怕的。

enter image description here

编辑2：

我将tabRight.png的位置设置为-10px（10px是宽度）并将边缘向右推，因此不再出现透明度问题。

谢谢你们的帮助！

Answer 1

2个选项：

为tabRight图像创建一个类。

.tab-right {
  width: 5px;
  height: 31px;
  background: transparent url('tabRight.png') left top no-repeat;
  display: inline-block;
  zoom: 1; /* for IE7 */
  *display: inline; /* for IE6 */
}

然后创建一个新的<li>元素：

<li class="tab-right"></li>

使用:after伪元素。

#nav li:after {
  content: "";
  width: 5px;
  height: 31px;
  float: left;
  background: transparent url('tabRight.png') left top no-repeat;
}

将width和height调整为图片的实际像素尺寸。

Answer 2

如果您can use CSS :after为伪选择器类，则将position:relative;添加到li和新规则中：

#nav li:after {
    width:5px;
    content:"";
    position:absolute;
    height:100%;
    top:0;
    right:0;
}

将在所有列表项的右侧添加一个元素。

Demo此处（为清晰起见添加了一些边框）

Answer 3

只需在LI中添加另一个范围，将其右边距设置为负数，以适应角落。相应地设置它和高度并将角落图像背景化。

我建议使用这种方法，因为它使任何菜单功能的脚本更简单，因为所有的li都将是一个菜单项

在列表之间添加元素

编辑：

编辑2：

3 个答案: