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

Question

我在导航中使用 CSS 样式的剪辑路径来改变 Angular 落背景的形状。在我向内容区域添加下拉菜单之前，这按我预期的方式工作。

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

有什么办法可以改变这种行为吗？我的目标是无论下拉菜单是否可见，都保持相同的剪裁。

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% 意味着低得多的不同值，因此斜率似乎更陡。

在下面的代码片段中，我们可以看到额外元素(第二个 p)的存在如何影响第二个 div 的高度，从而影响 的斜率>剪辑路径。

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>

Note: Stack Snippet output is not the same as Fiddle (with respect to colors) probably because of the order of linked files and CSS. Here is the JSFiddle Demo.