html - 需要帮助设计 Wordpress 中水平菜单的悬停状态样式，其中每一侧都有独特的形状

Question

我正在 Wordpress 中构建一个水平菜单，其中每个菜单项的左右两侧都有一个形状。菜单本身很容易构建，并且样式为带有 li 元素的 ul。我遇到的问题是悬停状态。我只是不确定如何设置它们的样式。

由于我无法在此处发布图片，因此我将链接到菜单外观的屏幕截图。首先，这是标准状态下的菜单。请注意，每个里的两侧都有自定义形状:

Standard State

这是一个示例鼠标悬停。如您所见，悬停颜色填充了整个形状:

Hover State

这似乎是症结所在。我可以使用背景图像使悬停状态在左侧或右侧工作，但不能同时在两者上工作。即使用独特的风格和独特的背景(我宁愿不这样做)来定位每个 li 也不起作用，因为没有简单的方法可以将 li 显示得如此之远以给人一种形状的错觉。同样，分隔线似乎也不是答案，因为我不知道如何触发它们的悬停状态。

有人有什么想法吗？我想我希望我忽略了一些简单或明显的东西。需要说明的是，我需要这个才能与 Wordpress 一起使用，最好是通过内置的菜单系统。

Answer 1

我认为更合适的解决方案是没有背景图像的解决方案。你可以在元素之前和之后使用，以及一些带边框的技巧，这样你就可以获得三 Angular 形。 Here是一个基本的工作示例，您可以从中开始。

ul{list-style-type:none;}
li{float:left; line-height:30px; font-size:25px; padding:0 10px; background: gray; margin:0 7px; position:relative;}
li:before{content:''; width:0px; height:0px; position:absolute; 
    left: -10px; top:0px; border:solid; border-color:gray transparent gray transparent; border-width:15px 0px 15px 10px;}
li:after{content:''; width:0px; height:0px; position:absolute; 
    right: -10px; top:0px; border:solid; border-color: transparent transparent transparent gray; border-width:15px 0px 15px 10px;}

li:hover{background:blue;}
li:hover:before{border-color:blue transparent blue transparent;}
li:hover:after{border-color:transparent transparent transparent blue;}