纯css绘制斜线表头

效果图如下

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#lineTd {background: #f0f0f6 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}tr{height: 50px;
}td{width: 200px;border: 1px #000000 solid;
}</style>
</head>
<body style="background-color: #f0f0f6;color:#404040;"><table style="border-collapse:collapse;" cellspacing="0" cellpadding="0"><tbody><tr><td id="lineTd"><span style="float:left;margin-top: 10px;">项目</span><span style="float:right;">日期</span></td><td>2010-10-15</td></tr><tr><td>采购</td><td>9000元</td></tr></tbody></table>
</body>
</html>

主要CSS代码

#lineTd {background: #f0f0f6 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}

其中PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=
是base64加密后的代码，未加密的代码如下：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#b0b0b0" stroke-width="1"/></svg>
在线加解密
如果需要修改颜色，修改svg的strok属性即可即可

纯css绘制斜线表头相关推荐

CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
excel单元格斜线_Excel技巧 | 如何绘制斜线表头
说到Excel制表,相信有一个难题困扰过不少人,那就是如何绘制斜线表头. 近日小编就遇到了关于如何在excel表格中画斜线的问题,那么怎么实现呢? 今天,就让我们一起来学习一下Excel中斜线表头的制 ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
纯css绘制的疲惫表情包
下载地址纯css绘制的疲惫表情包网页代码 dd:
excel单元格斜线_Excel技巧 | 如何快速绘制斜线表头
说到Excel制表,相信有一个难题困扰过不少人,那就是如何绘制斜线表头. 近日小编就遇到了关于如何在excel表格中画斜线的问题,那么怎么实现呢? 今天,就让我们一起来学习一下Excel中斜线表头的制 ...
excel单元格斜线_做个高级表格，绘制斜线表头的三种方法，看你可以学会几种？...
工作中做表格经常会遇到需要绘制斜线表头的时候,今天我们具体说下斜线表头的绘制方法先看下效果图绘制斜线表头方法一 1. 选中单元格-------插入------形状-----直线-----在单元格里 ...

纯css绘制斜线表头

效果图如下

代码

主要CSS代码

纯css绘制斜线表头相关推荐

最新文章

热门文章