倾斜的背景 div 定位到内容块的右下角答案

【问题标题】：Skewed background div positioned to the content block's right hand bottom corner倾斜的背景 div 定位到内容块的右下角
【发布时间】：2016-07-30 19:42:08
【问题描述】：

看下面的例子

.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 的右侧，因此它的溢出与中的内容相匹配容器：（请注意，出于屏幕截图的目的，我将底部修改为 -25px，原始值 0 在屏幕调整大小时会产生随机结果）

是否可以根据应用于nav-bar:before 元素的 1.6 度倾斜计算底部差异？请考虑响应能力。

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

【问题讨论】：

如果有人有兴趣，这里申请了covema.pt/pt/inicio

标签： html css css-transforms skew

【解决方案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>

【讨论】：