倾斜的背景div位于内容块的右下角

Question

请参阅以下示例

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我试图让绿色歪斜的导航栏：在之前将导航容器的右下方放置在底部，这样它就可以了。 s溢出匹配容器中的内容： （请注意，为了截图的目的，我将底部修改为-25px，原始值0会在屏幕调整大小时产生随机结果）

是否可以根据应用于nav-bar:before元素的1.6deg偏差计算底部差异？请考虑回应。

或者仅仅是使用媒体查询断点手动调整的情况？

Answer 1

您可以将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>