CSS旋转表但保持单元格方向

Question

我有一个有角度的页脚：

.angled{
background-color: red;
height: 120px;
width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

<div class="angled"></div>

我现在想在其中定位导航。

我的想法是用一张桌子来构建页脚。但为了让导航项目适合页脚，我必须旋转表格。但是，如果桌子是旋转的，我怎么能让细胞保持直立？

或者有人对如何做到这一点有更好的想法？

Answer 1

您可以考虑倾斜容器，然后在内部拆开元素：

.angled {
  background-color: red;
  height: 120px;
  width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}

.container {
  color: #fff;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(-6deg);
}

.container>span {
  transform-origin: left;
  transform: skewY(6deg);
}

<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>

你可以看到角度需要根据尺寸改变，因为它由tan(angle) = h/w定义，其中w是元素的宽度，这是一个块元素（这是动态的）而h是高度的40％，部分被删除了clip-path（这个是静态的）。

这是一个小的JS代码，您可以添加它来纠正屏幕调整大小的倾斜角度：

var elem = document.querySelector('.angled');

var w = elem.offsetWidth;
elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");

window.onresize = function(event) {
    w = elem.offsetWidth;
    elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");
};

.angled {
  background-color: red;
  height: 120px;
  width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}

.container {
  color: #fff;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(calc(-1 * var(--a)));
}

.container>span {
  transform-origin: left;
  transform: skewY(var(--a));
}

<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>

由于我们使用偏斜，你可以摆脱clip-path并考虑偏斜元素的背景：

var elem = document.querySelector('.angled');

var w = elem.offsetWidth;
elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");

window.onresize = function(event) {
    w = elem.offsetWidth;
    elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");
};

.angled {
  height: 120px;
  width: 100%;
  overflow: hidden;
}

.container {
  color: #fff;
  background:red;
  height:100%;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(calc(-1 * var(--a)));
}

.container>span {
  transform-origin: left;
  transform: skewY(var(--a));
}

<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>