html - 适用于段落的偏斜属性

这个问题已经有了答案：
How to skew element but keep text normal (unskewed)
5个答案
我正在使用skew，但是转换也应用于斜线框内的所有内容，如您在我的笔中所见。这一段看起来是斜体的。
http://codepen.io/Sidney-Dev/pen/RGXVpb

.services {
  display: flex;
  overflow: hidden;
}
.left {
  background-color: black;
  height: 250px;
  width: 60%;
  margin-left: -50px;
}
.right {
  background-color: green;
  width: 50%;
  margin-right: -500px
}
.skew {
  transform: skew(-15deg);
}
p {
  color: white;
}

<section class="services">
  <div class="left skew">
    <div class="inner-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p>
    </div>
  </div>
  <div class="right skew">
  </div>
</section>

如何在不影响内部内容的情况下扭曲框？
希望你能帮忙

最佳答案

你倾斜了-15度。只需在你的.inner-container上加15度，如下所示：

.skew .inner-container {
  transform: skew(15deg);
}

只“打开”内部内容。

.services {
  display: flex;
  overflow: hidden;
}
.left {
  background-color: black;
  height: 250px;
  width: 60%;
  margin-left: -50px;
}
.right {
  background-color: green;
  width: 50%;
  margin-right: -500px
}
.skew {
  transform: skew(-15deg);
}
.skew .inner-container {
  transform: skew(15deg);
}
p {
  color: white;
}

<section class="services">
  <div class="left skew">
    <div class="inner-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p>
    </div>
  </div>
  <div class="right skew">
  </div>
</section>