时间戳

首页 > 解决方案 > CSS旋转表格但保持单元格方向

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

问题描述

我有一个倾斜的页脚：

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

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

我的想法是使用表格来构建页脚。但是为了让导航的项目适合页脚，我必须旋转表格。但是，当桌子旋转时，如何保持单元格直立？

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

标签： htmlcssclip-path

解决方案

您可以考虑倾斜容器然后取消倾斜里面的元素：

.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/wwhere定义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>

推荐阅读