css table自适应斜线

铁板海带

已于 2022-12-26 13:45:11 修改

阅读量264

点赞数

文章标签： css javascript 前端

于 2022-12-26 13:43:57 首次发布

本文链接：https://blog.csdn.net/weixin_44143476/article/details/128442642

版权

复制下面这张斜线svg，可以修改颜色

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#E6E6E6" stroke-width="1"/></svg>

设置好自己想要的svg后转base64

// 找到页面上面的svg元素
const svg = document.getElementById('svg');
 // 将整个 document 对象序列化为一个 XML 字符串
const s = new XMLSerializer().serializeToString(svg);
 // 通过window.btoa() 方法用于创建一个 base-64 编码的字符串
const img = `data:image/svg+xml;base64,${window.btoa(s)}`;

dom

<th class="lineTh" :colspan="treeList[0].length">
	<span style="float:left;margin-top:20px;">项目</span>
	<span style="float:right;margin-top:10px;">日期</span>
</th>

css 背景图片使用base64的图片，宽度100%进行自适应

.lineTh {
 background: #38ADAB url(data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtM2ZkOWYxMGI9IiIgaWQ9InN2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48bGluZSBkYXRhLXYtM2ZkOWYxMGI9IiIgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwJSIgeTI9IjEwMCUiIHN0cm9rZT0iI0FGQUZBRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+) no-repeat 100% center;   
}