我想为我的HTML表格创建倾斜的标题,如下面Excel的截图所示。有没有办法用CSS实现这个设计
我尝试使用Flex我的HTML代码:
.container {
display: flex;
justify-content: space-between;
}
.container > * {
flex: 1;
border: 1px solid black;
padding: 0px 2px;
transform: rotate(-45deg);
}
<div class="container">
<div class="matrix-column">
Column 1
</div>
<div class="matrix-column">
Column 2
</div>
<div class="matrix-column">
Column 3
</div>
<div class="matrix-column">
Column 4
</div>
<div class="matrix-column">
Column 5
</div>
<div class="matrix-column">
Column 6
</div>
</div>
Codepen链接:https://codepen.io/a-arora/pen/QWBWvxK
提前感谢您的帮助!:)
1条答案
按热度按时间67up9zun1#
我找到了两个在线资源,指出了解决方案。
使用
transform: rotate()
和translate()
rotate()
用于调整页眉Angular ,translate()
用于调整位置。原始文章可在here中找到。以下片段:
使用
transform: rotate()
和skew()
与上面类似,但使用
skew
来调整位置。请参阅原始Codepen示例here。以下片段:
一个二个一个一个