倾斜的背景 div 位于内容块的右下角
Skewed background div positioned to the content block's right hand bottom corner
看下面的例子
.nav-bar {
position: relative;
background-color: red;
}
.nav-bar:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 10.938rem;
background: #1a5733;
z-index: -1;
-webkit-transform: skewY(-1.6deg);
-moz-transform: skewY(-1.6deg);
-ms-transform: skewY(-1.6deg);
-o-transform: skewY(-1.6deg);
transform: skewY(-1.6deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
display: block;
}
.nav-menu {
position: relative;
}
<div class="nav-bar">
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Sobre</a>
<a href="#" class="nav-link">Destaques</a>
<br>
<a href="#" class="nav-link">Contactos</a>
<br>
</nav>
</div>
我正在尝试让绿色倾斜 nav-bar:before 以将底部定位在 nav-container[=31= 的右手边] 所以它的溢出与容器中的内容相匹配:
(请注意,出于屏幕截图的目的,我将 bottom 修改为 -25px,原始值 0 会在屏幕调整大小时产生随机结果)
是否可以根据应用于 nav-bar:before
元素的 1.6 度倾斜计算底部差异?请考虑响应速度。
还是只是手动调整媒体查询断点的情况?
您可以向元素添加 transform-origin: right bottom
来完成此操作。将变换原点设置为 right bottom
意味着通过保持该点固定来应用变换。
.nav-bar {
position: relative;
background-color: red;
}
.nav-bar:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 10.938rem;
background: #1a5733;
z-index: -1;
-webkit-transform: skewY(-1.6deg);
-moz-transform: skewY(-1.6deg);
-ms-transform: skewY(-1.6deg);
-o-transform: skewY(-1.6deg);
transform: skewY(-1.6deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform-origin: right bottom;
display: block;
}
.nav-menu {
position: relative;
}
<div class="nav-bar">
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Sobre</a>
<a href="#" class="nav-link">Destaques</a>
<br>
<a href="#" class="nav-link">Contactos</a>
<br>
</nav>
</div>
看下面的例子
.nav-bar {
position: relative;
background-color: red;
}
.nav-bar:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 10.938rem;
background: #1a5733;
z-index: -1;
-webkit-transform: skewY(-1.6deg);
-moz-transform: skewY(-1.6deg);
-ms-transform: skewY(-1.6deg);
-o-transform: skewY(-1.6deg);
transform: skewY(-1.6deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
display: block;
}
.nav-menu {
position: relative;
}
<div class="nav-bar">
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Sobre</a>
<a href="#" class="nav-link">Destaques</a>
<br>
<a href="#" class="nav-link">Contactos</a>
<br>
</nav>
</div>
我正在尝试让绿色倾斜 nav-bar:before 以将底部定位在 nav-container[=31= 的右手边] 所以它的溢出与容器中的内容相匹配:
是否可以根据应用于 nav-bar:before
元素的 1.6 度倾斜计算底部差异?请考虑响应速度。
还是只是手动调整媒体查询断点的情况?
您可以向元素添加 transform-origin: right bottom
来完成此操作。将变换原点设置为 right bottom
意味着通过保持该点固定来应用变换。
.nav-bar {
position: relative;
background-color: red;
}
.nav-bar:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 10.938rem;
background: #1a5733;
z-index: -1;
-webkit-transform: skewY(-1.6deg);
-moz-transform: skewY(-1.6deg);
-ms-transform: skewY(-1.6deg);
-o-transform: skewY(-1.6deg);
transform: skewY(-1.6deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform-origin: right bottom;
display: block;
}
.nav-menu {
position: relative;
}
<div class="nav-bar">
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Sobre</a>
<a href="#" class="nav-link">Destaques</a>
<br>
<a href="#" class="nav-link">Contactos</a>
<br>
</nav>
</div>