【css】css实现斜线表头

得寸进尺的鸡丝面

已于 2022-03-29 14:23:26 修改

阅读量1.6k

点赞数 2

分类专栏：前端前端开发文章标签： css html5

于 2022-03-29 14:22:32 首次发布

本文链接：https://blog.csdn.net/evangeline113/article/details/123820006

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端开发

2 篇文章 0 订阅

订阅专栏

文章目录

一、成果展示
二、实现

一、成果展示

在这里插入图片描述

二、实现

代码如下（示例）：
html

<TD  class="TableTwice">   
		<span>年度</span>
		<br>
		<span>类别</span> 
</TD>

css

<style type="text/css">
			 .TableTwice{
				background:#fcfcfc;
 			 }
			.TableTwice::before{
				content: '';
				position: absolute;
				width: 1px;
				height: 216px;
				background-color: rgb(192, 192, 192);
				display: block;
				transform: rotate(-80deg);
				transform-origin: top;
				overflow: hidden;	
			}
			.TableTwice span:first-child{
				padding-left: 100px;
			}
			.TableTwice span:last-child{
				padding-right: 100px;
			}
</style>