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是元素的宽度，该元素是块元素（这是动态的），而{{ 1}}是高度的40％，由h删除的部分（此部分是静态的）。

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

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 {
  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));
}

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

1 个答案: