Wordpress CSS Main Navigation .current-menu-item 变换 :

Question

我在本地安装了 wordpress 并使用主题。在页面上时，“当前页面”有一条三 Angular 形的动态彩色线条。最终目标是采用三 Angular 形并将其复制到整个菜单项中，以获得锯齿状效果，而不是单一居中的效果。我在“动态菜单突出显示”上找到了一些 Material ，但无法弄清楚如何应用它. 它不是图像或背景图像，它似乎是纯粹的 css。下面是来自 styles.css 的 css 示例。当我玩转 transform: 我可以得到一些结果，只是不是想要的结果。希望有人能帮忙。谢谢!

.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 三 Angular 形解释:How do CSS triangles work?

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

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

编辑:

我找到了另一个纯 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/ ]