CSS 旋转 table 但保持单元格方向
CSS rotate table but keep cell orientation
我有一个倾斜的页脚:
.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 来构造页脚。但是为了让导航项适合页脚,我必须旋转 table。但是我怎样才能让细胞保持直立,而 table 是旋转的?
或者有人对如何执行此操作有更好的想法?
您可以考虑先倾斜容器然后再倾斜其中的元素:
.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>
我有一个倾斜的页脚:
.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 来构造页脚。但是为了让导航项适合页脚,我必须旋转 table。但是我怎样才能让细胞保持直立,而 table 是旋转的?
或者有人对如何执行此操作有更好的想法?
您可以考虑先倾斜容器然后再倾斜其中的元素:
.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>