剪辑路径和下拉菜单导致不同的形状
clip-path and dropdowns cause different shapes
我在导航中使用 CSS 样式的剪辑路径来改变角落背景的形状。在我向内容区域添加下拉菜单之前,这按我的预期工作。
当下拉菜单隐藏时,形状会正确显示,当下拉菜单可见时,形状会发生变化。根据我的研究,这是由于 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
原因:
正如您已经在问题中指出的那样,问题似乎是因为 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>
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.
我在导航中使用 CSS 样式的剪辑路径来改变角落背景的形状。在我向内容区域添加下拉菜单之前,这按我的预期工作。
当下拉菜单隐藏时,形状会正确显示,当下拉菜单可见时,形状会发生变化。根据我的研究,这是由于 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
原因:
正如您已经在问题中指出的那样,问题似乎是因为 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>
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.