使用css将div添加到div的一侧

我需要在菜单中的当前li的一侧添加一个三角形。 我设置它以便我可以用jquery编辑它的css,并想知道是否可以通过编辑li上的边框而不是添加新的div来实现这种效果。

jsfiddle:我想通过向div-1添加边框来了解第二个div

 

.div-1 { width:174px; height:32px; line-height:32px; margin-bottom:6px; display:block; background-color:#149dae; } .triangle { width: 0px; height: 0px; border-style: solid; border-width: 16px 0 16px 16px; border-color: transparent transparent transparent #149dae; position:absolute; margin-left:174px; }

您还没有关闭div-1修复,然后将div-1 display属性更改为inline-block作为值并display:inline for triangle div。

而已。 有用。

JSFiddle链接

这是小提琴http://jsfiddle.net/py3BU/4/我编辑了你的代码。 这是你在找什么? 一个三角形出现在你hover的div的一侧。

这是代码。

HTML代码。

  


这是CSS代码

 .div-1 { width:174px; height:32px; line-height:32px; margin-bottom:6px; display:block; background-color:#149dae; } .div-1:hover { width:158px; height: 0px; border-style: solid; border-width: 16px 0 16px 16px; border-color: transparent transparent transparent #85b375; } 

我希望你能实现这一目标。

如果您不使用背景图像,则需要添加另一个div或元素以在另一个内部获得三角形。 否则,将背景图像添加到具有您想要的三角形形状的li将是一个聪明的主意。