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

我现在想在其中放置一个导航。

我的想法是使用表格来构建页脚。但是为了让导航项适合页脚，我必须旋转表格。但是，当 table 旋转时，我怎样才能使单元格保持直立呢？

或者有人对如何执行此操作有更好的想法？

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>

如您所见， Angular 需要根据尺寸变化，因为它由 tan(angle) = h/w 定义，其中 w 是元素的宽度这是一个 block 元素(这是动态的)，h 是高度的 40%，被 clip-path 移除的部分(这是静态的)。

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

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>