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

Question

看下面的例子

.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 度倾斜计算底部差异？请考虑响应速度。

还是只是手动调整媒体查询断点的情况？

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>

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

Skewed background div positioned to the content block's right hand bottom corner

html

css

css-transforms

skew