如何使用HTML-CSS将倾斜/倾斜背景颜色设置为文本

我需要实现的是以下示例图像中显示的内容

我需要背景沿着文本生长，因为文本可以是动态的，所以我不能设置静态图像背景。此外，文本应该能够重叠较暗的背景条纹（如示例中“lorem”的“l”中所示），并且可以有多行文本

---

欢迎使用交叉浏览器解决方案。

这样的解决方案可以让您开始：

<div class="bottom">
    <br>
    <div class="under">
        <div class="over">
            lorem ipsum dolor
        </div>
    </div>
</div>

.bottom {
    background-color: #bbb;
    height: 100px;
}

.under {
    background-color: #555;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari and Chrome */
}

.over {
    margin-left: 120px;
    color: white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */
}

同侧阴唇
.底部{
背景色：#bbb；
高度：100px；
}
{
背景色：#555；
变换：旋转（5度）；
-ms变换：旋转（5度）；/*IE 9*/
-webkit变换：旋转（5度）；/*Safari和Chrome*/
}
.结束{
左边距：120像素；
颜色：白色；
变换：旋转（-5度）；
-ms变换：旋转（-5度）；/*IE 9*/
-webkit变换：旋转（-5度）；/*Safari和Chrome*/
}

例如：

谢谢，这很有用。（之前忘记说什么，对不起）