通过css实现表格的斜线

效果图

实现思路

• 编辑一个svg文件，可以自定义线条颜色和粗细。
• 将svg文件转为base64格式，作为背景图属性设置。
• svg转base64的网址：https://www.sojson.com/image2base64.html

实现代码

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

# table.html
<style>
.first-cell {
     background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPgo=) no-repeat 100% center;
  }
</style>
<div class="pw-info first-cell">
  <span class="pw-title">评委</span>
  <span class="candidate-title">被评人</span>
</div>