Question

我需要将设计转换为html。设计显示一个透明箭头指向当前选定的选项卡。

我是否觉得使用填充三角形很困难。我想用一个薄透明三角形替换它。 Jsfiddle链接here

li {
      width:100px;
      list-style-type:none;
      float:left;  
      color:#fff;
       padding:10px 5px;
     position:relative;
    text-align:center;
}
li.selected:after {
 border: 8px solid transparent;
 border-top: none;
 border-bottom-color:#fff;
 position:absolute; 
    bottom:-10px;
 left:40%;   
    content:' ';
}

我使用的是瘦图像而不是css三角形，我的问题是如何使用尖刺无缝线指向选定的菜单

- 的 ^ -

Answer 1

如果您的<li>宽度相同，则可以：

从<ul>
在所有<li>未激活的
在有效<li>上，您可以使用:before和:after模拟边框箭头周围。
您需要在<li>中为箭头添加span等元素。

演示：http://jsfiddle.net/np6ztcav/4/

在一条线上使用Css透明箭头

1 个答案: