Question

我想生成如下内容（请注意“产品”下方的倒置箭头： enter image description here

我想在活动菜单项下方显示一个倒箭头。巨型菜单位于Bootstrap .container内。

然而，凭借我的技能，这是我迄今为止所取得的成就。两边有两条溢出的线条。我使用活跃:before内的箭头元素的:after和<li>创建了这些内容。挑战是让它们仅在.container以下

的范围内可见

enter image description here

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

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

此脚本的唯一缺点是，当悬停ul:after而不是ul时，默认空格（由li显示）也会被删除。也许有人可以想出一个解决方案。

JSFiddle

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

Answer 3

完成以下修改： RESULT PEN

添加z-index，调整margin-top并从width和:after e中删除:befor。 您获得额外白色背景的原因是因为您将宽度指定为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;
}

大型菜单中活动菜单项的倒三角形

3 个答案: