创建到div的倾斜边缘

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