剪辑路径和下拉菜单导致不同的形状

Question

我在导航中使用 CSS 样式的剪辑路径来改变角落背景的形状。在我向内容区域添加下拉列表之前，这可以正常工作。

当下拉菜单被隐藏时，形状会正确显示，当下拉菜单可见时，形状会发生变化。根据我的研究，这是由于剪辑路径使用元素的宽度和高度来确定元素的剪辑，并且当下拉列表可见时，元素的高度会发生变化。

有没有办法改变这种行为？无论下拉菜单是否可见，我的目标是保持相同的剪辑。

CSS

.dropdown {
  background-color: #000;
  -webkit-clip-path: polygon(100% 0,100% 0,100% 100%,10% 100%,0 0);
  clip-path: polygon(100% 0,100% 0,100% 100%,10% 100%,0 0);
  padding-left: 50px;
}


.nav .open>a:focus,
.nav>li>a:focus,
.nav>li>a:hover,
.dropdown:focus,
.dropdown:hover,
.nav .open>a {
  background-color: #000;

}

.dropdown-menu {
  float: right;
  right: 0px;
  left: auto;
}`

HTML

<div id="navbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu goes here <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
      </ul>
    </li>
  </ul>
</div>

JSFiddle

https://jsfiddle.net/7hg1efdj/1/

Answer 1

原因：

正如您已经指出的那样，问题似乎是因为clip-path 中使用的百分比值。当下拉框处于折叠状态时，内容的高度很小（只有 50px 左右），而在展开状态时，内容的高度很大（包括下拉列表的高度）。因此，Y 轴上的 100% 意味着不同的值向下低得多，因此斜率似乎更陡峭。

在下面的 sn-p 中，我们可以看到额外元素（第二个p）的存在如何影响第二个div 的高度，从而影响clip-path 的斜率。

div {
  position: relative;
  width: 200px;
  height: 50px;
  margin: 10px;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 10% 100%, 0 0);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 10% 100%, 0 0);
}
span{
  display: block;
  height: 100%;
}  
span:nth-of-type(1) {
  background: red;
}
span:nth-of-type(2) {
  position: absolute;
  width: 100%;
  top: 100%;
  background: green;
}

<div>
  <span>
    Red Background
  </span>
</div>
<div>
  <span>
    Red Background
  </span>
  <span>
    Green Background
  </span>
</div>

---

解决办法：

解决方案是将clip-path 放在a.dropdown-toggle 元素上，因为该元素的高度和宽度都不受下拉状态的影响。

.navbar-nav > li > a.dropdown-toggle {
  background-color: #000;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 10% 100%, 0 0);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 10% 100%, 0 0);
  padding-left: 50px;
}
.nav .open>a:focus, .nav>li>a:focus, .nav>li>a:hover, .nav .open>a {
  background-color: #000;
}
.dropdown-menu {
  float: right;
  right: 0px;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="navbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu goes here <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a>
        </li>
        <li><a href="#">One more separated link</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

注意： Stack Snippet 输出与 Fiddle 不同（在颜色方面）可能是因为链接文件和 CSS 的顺序。这是JSFiddle Demo。