Wordpress CSS主导航。当前菜单项转换：

我在本地安装了wordpress并使用了一个主题。在页面上，“当前页面”有一条三角形的动态彩色线条。最终目标是将三角形复制到整个菜单项中，以获得锯齿状效果，而不是单中心效果。。我在“动态菜单突出显示”上找到了一些材料，但不知道如何应用它。 它不是一个图像或背景图像，它似乎是纯粹的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;
}

---

这里有一个很好的css三角形解释：

但是您不能使用此技术仅使用一个html元素创建多个三角形

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

编辑：

我发现了另一个仅css的解决方案（这里受lea verou的第三个元素影响很大：）-但是它在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%);      
}

请点击此处：

---

[注意：它使用lea verou的无前缀脚本]

您的问题似乎与wordpress有关。我建议在你的问题标题中也加入这一点。CSS示例很好，但是如果没有html，不使用wordpress的人就有点难以理解。另外，你可以使用这个工具来更清楚地展示你的例子。我不完全确定这是否与wordpress有关，但需要澄清的是。。。是否希望在现有元素上采用现有样式并更改样式在该元素上的显示方式？如果是这样的话，那么这纯粹是一个css问题。你能确认这两种方式吗？它与css直接相关。我想Wordpress应该把它放到上下文中去。就元素而言。这就是我不明白的。当我播放变换：旋转并将度数设置为90时，它将变为平方。默认情况下，45度为三角形。我只是不明白形状是什么，我也不太了解css。我可以把它全部移走，也许我会这样做。然后我可以用一个图像来代替它，并得到想要的效果，使它锯齿状。有什么解释或建议吗？@caitriona也有。下面是导航栏的屏幕截图。好的，我明白了。不幸的是，创建多个三角形并不是一个简单的css修复方法，因为每3个三角形需要一个新元素（假设可以使用：after&：before伪元素）。考虑到你（自称）缺乏css知识，要获得你想要的效果，最简单的解决方案可能是使用图像。嘿，非常感谢@Caitrona。这极大地帮助我理解了这种效应是如何产生的。在完成了所有这些工作之后，我觉得它没有我想象的那么好。谢谢你的努力。