Question

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

jsfiddle:我想通过向div-1

添加边框来了解第二个div

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

Answer 1

您尚未关闭div-1修正版然后将display的{{1}}属性更改为div-1作为值，将inline-block更改为display:inline div。

就是这样。它有效。

JSFiddle link

Answer 2

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

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

Answer 3

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

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

3 个答案: