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的第3个元素的影响很大：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 here：http://jsfiddle.net/hGy6X/

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

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

1 个答案: