0

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

jsfiddle：我想通过添加边框来查看第二个 divdiv-1

<div class="div-1"></div>
<br>
<div class="div-1"><div><div class="triangle"></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;
}
4

3 回答 3

1

您还没有关闭div-1修复，然后将display属性div-1更改为inline-block值和div。display:inlinetriangle

而已。有用。

JSFiddle 链接

于 2013-09-09T15:22:42.163 回答
1

这是小提琴http://jsfiddle.net/py3BU/4/ 我已经编辑了你的代码。这就是你要找的东西？一个三角形出现在您悬停的 div 的一侧。

这是代码。

html代码。

  <div class="div-1"></div>
  <br>
  <br /><div class="div-1"></div>

这是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;
 }

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

于 2013-09-09T16:26:10.353 回答
0

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

于 2013-09-09T15:23:35.287 回答