您可以使用倾斜的伪元素来制作元素的倾斜纯色背景。这样，文本将不受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>
