table表格中画斜线

在html、jsp中经常用到table，但在table中如何实现标题表格中画斜线的操作呢？从网上查了很多资料，可以实现的方法有好几种，现在提供一种简单的操作方法，而且不用考虑分辨率的问题，方法如下：

 

该方法，实现的不是纯粹的在table中画斜线，而是实现两种颜色的对比，实现出有斜线的感觉：

<style>

/*对角钱矩形宽度为50，高度为100，分别对应border-top和border-left两个属性来设定*/

.d1{border-top:100px threedlightshadow solid;border-left:120px windowframe solid;width:0;height:0;position:relative;color:#FFF}

span{display:block;width:40px}

.s1{position:absolute;top:-70px;left:-44px;color:black;}

.s2{position:absolute;bottom:8px;right:55px}

</style>

 

<div class="d1">

<span class="s1">专业</span>

<span class="s2">项目</span>

</div>

 

由于插入不了图片，现在无法查看效果，不过如果对你有帮助，你可以实现看看！

评论

1 楼 wenm168 2016-12-29  

js兼容浏览器任意画斜线表格的简单方法：http://www.anyrt.com/blog/list/htmline.html