使用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将是一个聪明的主意。