css实现斜线效果以及vue自带插件打印背景色

在开发过程中遇到了一个很奇葩的问题，问题要求总结有如下三点：

1. 页面分三部分，上半部分高度不确定，下半部分高度确定，中间部分需要填充除了上半部分和下半部分的区域。
2. 填充方式为斜线。
3. 该页面需要打印出来。

这三个要求随便一个单独实现都不难，难得是全部满足。
首先，中间部分要填充剩下的区域，我采用弹性盒模型去实现。

<div style="height:180mm;display:flex:flex-direction:column">
	<div class="top-div" style="flex:0 0 auto">...</div>
	<div class="middle-div" style="flex:1 1 auto">...</div>
	<div class="bottom-div" style="flex:0 0 auto">...</div>
</div>

然后再去填充一条对角斜线，这个时候问题就出现了，网上大部分的画斜线的方式都是要已知高度和宽度的（多种实现斜线的方式），而我需要填充的中间部分是随着上半部分的大小变化而变化的，高度无法确定，那怎么办呢？我搜到了一种画法。

.middle-div{
	background:   linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}

最后，来解决第三个问题，打印该页面。又出现了问题了----这种方式是通过区域背景色实现的，而vue自带的打印插件vue-print-nb是无法打印背景色的，解决方法就是显示添加一个样式定义。

.middle-div{
    -webkit-print-color-adjust: exact;
	background:   linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

好啦，至此，问题全部解决！
（我才不会说因为纠结于怎么不使用背景色的形式画斜线，导致我搞这个东西搞了一下午。。。）