在div中对角包装内容

Question

我希望#content-body-text div中的内容与div #book4中包含的矩形对角对齐，基本上允许#content-body-text中的文字随着我们接近底部而缩小宽度。

我不确定这样做的最佳方法是什么。现在，#book4是一个div，只有一个对角矩形的背景。我考虑过只在#book4上进行背景填充，然后用transform: rotate(xxxdeg)来替换div的背景图片，但是如果我这样做，我仍然不确定将#content-body-text包裹在这个旋转的div周围。

此屏幕截图显示了我要执行的操作：

我有一个jsfiddle我的样本布局可用here。

我愿意接受有关如何执行此操作的任何建议。