Wordpress CSS 主导航 .current-menu-item 转换：

Question

我在本地安装了 wordpress 并使用了一个主题。在页面上时，“当前页面”有一条三角形的动态彩色线。最终目标是获取三角形并将其复制到整个菜单项中，以获得锯齿状效果，而不是单个居中的效果。我在“动态菜单突出显示”上找到了一些材料，但不知道如何应用它. 它不是图像或背景图像，它似乎是纯粹的 css。下面是来自 styles.css 的 CSS 示例。当我玩转变换时：我可以得到一些结果，只是不是想要的结果。希望有人可以提供帮助。谢谢！

.not-ie #main-nav .current_page_item:after,
.not-ie #main-nav .current_page_parent:after,
.not-ie #main-nav .current-menu-item:after {
    background: #f15a23;
    bottom: -2.5px;
    content: '';
    left: 50%;
    display: block;
    height: 5px;
    margin: 0 0 0 -2.5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    width: 5px;
}

Answer 1

这里有一个很好的 CSS 三角形解释：How do CSS triangles work?

但您不能使用这种技术仅使用一个 html 元素来创建多个三角形。

您可以引入更多元素，以便显示更多三角形，但这对我来说听起来不是一个很好的解决方案。所以在这种情况下，使用图像可能是最简单的。使用图像的优点还在于，如果您有不同宽度的元素，您可以水平重复它。

编辑：

我找到了另一个纯 css 解决方案（受 lea verou 的第三个元素的严重影响：http://leaverou.github.com/animatable/） - 但是它在 IE 中不起作用，所以它可能不是你的解决方案，但如果你'有兴趣，这里是：

#zig_zag {
    width: 140px;
    height: 5px;
    border-top:1px solid #E91010;
    background-repeat: repeat-x;
    background-position:10px 0;
    background-size: 7px 10px;
    background-image:
        linear-gradient(-45deg, #E91010 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E91010 75%),
        linear-gradient(45deg, #E91010 25%, transparent 25%),
        linear-gradient(-45deg, transparent 75%, #E91010 75%);      
}

jsfiddle 在这里：http://jsfiddle.net/hGy6X/

[注意：它使用 lea verou 的前缀免费脚本http://leaverou.github.com/prefixfree/]