完全灵活的HTML/CSS“透明”导航箭头（见例）

Sample of What I'm trying to do...完全灵活的HTML/CSS“透明”导航箭头（见例）

所以，我的老板非常喜欢向导导航我已经建立了这个演示页面（上图）的风格。但是，当我构建它时，该方法有点静态。我的意思是，它不能很好地延伸到5或6或10个向导步骤。但是，我需要将它扩展到那些自然的步骤。

我可以得到一些关于如何修改CSS代码的建议，以便它更灵活地工作吗？我花了几个小时玩它，结果令人不满。

2012-10-15 Mike Earley

您有任何浏览器需求？ –

IE8 +，目前的Chrome/Firefox/Safari。 –

它使用border S和伪元素是可能的：

.selected:before, .selected:after { 
    position: absolute; 
    top: 0; 
    content: ""; 
    border-top: 20px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 20px solid rgba(0, 0, 0, 0.5); 
    border-left: none; 
    border-right: 20px solid transparent; 
} 
.selected:before { 
    left: 0; 
} 
.selected:after { 
    right: 0; 
    border-right: none; 
    border-left: 20px solid transparent; 
}

Demo（经测试，在Chrome和Firefox）

你会发现我用SASS的例子。这样，如果您有three或12，则只需在一个位置更改一个变量（$wizard-steps），并且它会计算所有其他值以保持其为全宽（并且流体！）。如果需要动态的话，这也可以用Javascript完成。

来源

2012-10-15 15:04:33 bookcasey

真棒，我会给这个旋转。我不能使用sass b/c其他开发人员不使用它，但我绝对赞赏这个包含 - 我将它用于所有我自己的东西，并希望能够继续使用它... –

这是一个PHP驱动的网站，顺便说一句。 –

完全灵活的HTML/CSS“透明”导航箭头（见例）

回答

相关问题