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％表示远低于其他值的不同值，因此斜率似乎更陡峭。

在下面的代码段中，我们可以看到额外元素（第二个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。

剪辑路径和下拉列表会导致不同的形状

1 个答案:

原因：

解决方案：