您可以使用倾斜的伪元素来制作元素的倾斜纯色背景。这样，文本将不受transform属性的影响。
transform origin属性允许伪元素从右下角倾斜，并且溢出的部分用隐藏overflow:hidden;。
伪元素以负数堆叠在div的内容后面z-index：
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
body {
background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
602392714
清零编程群