在超级菜单中，活动菜单项采用倒三角形式突出显示

Question

我想制作类似以下内容的东西（请注意“产品”下方的倒箭头： 我想在活动菜单项下面显示一个倒置的箭头。超级菜单位于Bootstrap .container 内部。

然而，凭借我的技能，到目前为止我只能做到这一点。两条线从两侧溢出。我使用了活动<li>内的箭头元素的:before和:after来创建它们。挑战是使它们仅在.container范围内可见。

演示: Demo

- coder9

---

@YenneInfo，没有看到...但现在看到了 :) 谢谢 - GreyRoofPigeon

Answer 1

我没有看到演示链接，但已经为您设置了这个纯CSS代码：

<ul>
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

<div class="content">&nbsp;</div>

ul {
    margin: 0 auto;
    width: 90%;
    height: 60px;
    overflow: hidden;
    position: relative;
}

ul li {
    float: right;
    padding: 5px;
    height: 40px;
    background: lightblue;
    position: relative;
}
ul li:hover:before {
    content: ' ';
    position: absolute;
    right: 50%;
    margin-right: 5px;
    top: 40px;
    width: 10000px;
    height: 20px;
    background: white;    
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
}
ul li:hover:after {
    content: ' ';
    position: absolute;
    left: 50%;
    margin-left: 5px;
    top: 40px;
    width: 10000px;
    height: 20px;
    background: white;    
    -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
}

ul:after {
    content: ' ';
    position: absolute;
    top: 40px;
    width: 100%;
    height: 20px;
    background: white;    
}
ul:hover:after {
    display: none;
}

它在菜单项下方创建了一个20像素的空间。这个空间由ul:after元素填充。当悬停在ul上时，:after类将被移除。当悬停在菜单项上时，会显示li:before和li:after，它们提供白色背景并倾斜，使其看起来像箭头。

这个脚本唯一的缺点是当悬停在ul而不是li上时，默认的白色空间（由ul:after表示）也会被移除。也许有人可以想出解决方法。 JSFiddle

- GreyRoofPigeon

Answer 2

你的做法过于复杂了。空格是由于伪元素的高度造成的。在这个例子中，我删除了你的箭头，并用CSS三角形替换它们，你只需要在你的打开类上添加一个伪元素，像这样（我让你调整尺寸和位置）：

.open::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 126px;
  transform: translate(-50%, 0);
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #808080 transparent transparent transparent;
} 

示例: http://codepen.io/mbrillaud/pen/ZGOqoa?editors=110

- Mehdi Brillaud

---

我想让三角形区域透明。使用背景色并不是解决方案。在演示中，我已经使用了一张透明的图片。 - coder9

Answer 3

已完成以下修改： RESULT PEN

添加了z-index，调整了margin-top，并从:after和:before中删除了width。你之前得到额外的白色背景是因为你给了100vw的宽度，这是不必要的。

 .header .menu > li.open.horizontal > span.arrow {
  background-image:
  url(https://s3.amazonaws.com/imgrvx/white.svg);
  background-repeat: no-repeat;
  width: 14px;
  height: 7px;
  left: calc(50% - 14px);
  margin-top: 19px;
  position: absolute;
  z-index:2;
}
.header .menu > li.open.horizontal > span.arrow:before {
  content: '';
  position: absolute;
  height: 7px;
  width: 100vw;
  background-color: #ffffff;
  display: block;
  left: -100vw;
  border-top: 1px solid #e6e6e6;

}
.header .menu > li.open.horizontal > span.arrow:after {
  content: '';
  position: absolute;
  height: 7px;
  left: 14px;
  background-color: #ffffff;
  border-top: 1px solid #e6e6e6;
}

- Tushar

---

我希望三角形区域是透明的。使用背景颜色并不是解决方案。在演示中，我使用了一个透明图像。 - coder9