Skew property applying to paragraph

Question

I am using skew but the transformation is also applying to all the content inside the skewed box as you can see in my pen. The paragraph is looking italicized. 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>

How can I skew the box without affecting the content inside?

Hope you can help

This can be done without using `skew`. Use `linear-gradient` on parent. [**Fiddle**](https://jsfiddle.net/9Lesw5tk/) — Mohammad Usman, Nov 01 '16 at 09:00
I actually like the idea of linear gradient. But I see that the paragraph overflows if I scale the window down. So I how can I keep the paragraph inside the black container at all time in this case? — Ragmah, Nov 01 '16 at 09:07
also.. I saw the line that separates the boxes(the one in the middle) does not look straight...instead it looks jagged. — Ragmah, Nov 01 '16 at 09:15

score 1 · Accepted Answer · answered Nov 01 '16 at 08:49

You skewed by -15deg. Just add 15deg to your .inner-container like this:

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

to "unskew" only the inner content.

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

Hope you don't mind looking at the answer of @Muhammad Usman 17 https://jsfiddle.net/9Lesw5tk/ The line in the middle(between the black box and the green ) looks a little jagged. I used the snippet you sent but it also does the same — Ragmah, Nov 01 '16 at 09:20

score 1 · Answer 2 · answered Nov 01 '16 at 08:50

Add skew(15deg) to p tag

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

As I added in the comments on the other answers..the skewed line looks a little jagged..How can I get the around that? — Ragmah, Nov 01 '16 at 09:21

Skew property applying to paragraph

2 Answers2