应用于段落的倾斜属性[重复]答案

【问题标题】：Skew property applying to paragraph [duplicate]应用于段落的倾斜属性[重复]
【发布时间】：2016-11-01 16:55:30
【问题描述】：

我正在使用倾斜，但转换也适用于倾斜框中的所有内容，正如您在我的笔中看到的那样。该段落看起来是斜体的。 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>

如何倾斜盒子而不影响里面的内容？

希望你能帮忙

【问题讨论】：

这可以在不使用skew 的情况下完成。在父级上使用linear-gradient。 Fiddle
我其实很喜欢线性渐变的想法。但是如果我缩小窗口，我会看到段落溢出。那么在这种情况下，我如何才能始终将段落保留在黑色容器中？
也..我看到分隔框的线（中间的那个）看起来不直...相反它看起来是锯齿状的。

标签： html css css-transforms

【解决方案1】：

您倾斜了 -15 度。只需将 15 度添加到您的 .inner-container，如下所示：

.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>

【讨论】：

欣赏答案并附上解释。
谢谢，很高兴能帮上忙。
希望你不介意看@Muhammad Usman 17 的答案jsfiddle.net/9Lesw5tk 中间的线（黑框和绿色之间）看起来有点锯齿状。我使用了你发送的 sn-p，但它也一样

【解决方案2】：

将skew(15deg)添加到p标签

.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;
  transform: skew(15deg);
}

<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>

【讨论】：

正如我在其他答案的 cmets 中添加的那样......倾斜的线看起来有点锯齿状......我怎样才能解决这个问题？