SOURCE

<div class="e1">文字</div>
<div class="e2"><span>文字2</span></div>
<san class="e3">倾斜的背景</span>

div {
  width:200px;
  height:40px;
  text-align:center;
  line-height:40px;
  color:pink;
  background: purple;
  margin-bottom:1em;
}
.e1 {
  transform:skewX(-45deg);
}
.e2 {
  transform:skewX(-45deg);
}
.e2 span {
  transform:skewX(45deg);
    display:block;
}
.e3 {
  width:10em;
  height:5em;
  line-height:5em;
  display:block;
  text-align:center;
  color:#fff;
  position: relative;
}
.e3::after {
  content:'';
  position: absolute;
  z-index:-1;
  background:purple;
  top:0;right:0;left:0;bottom:0;
  transform:skew(-45deg);
}