1

我在导航中使用 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/

4

1 回答 1

1

原因：

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

在下面的代码片段中，我们可以看到额外元素 (second p) 的存在如何影响 second 的高度，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-pathona.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 演示。

于 2016-03-10T17:41:52.057 回答