Skew a Partial Div but not its content.

Question

I was trying to skew a div but not its content regardless of whether it is image or text which should be vertical.

I have gone through many of the question related to my error on stack like
Create a slanted edge to a div,
How to skew element but keep text normal (unskewed)

In my aspect, nothing seems to help.

I have placed the image on to the left and text on to the right both of them should be skewed. but when I flip them like placing an image on to the right and (vice versa), it should justify itself.

Here is an inspirational image.

and here is a Fiddle I've worked for it.

<div class="container">
  <div class="partial-section">
    <div class="section-inner">
      <div id="parallelogram">
        <div class="image"></div>
      </div>
    </div>
  </div>
  <div class="partial-section">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
  border: 2px solid lightgrey;
  padding: 20px;
}

.partial-section h1 {
  font-size: 40px;
}

.partial-section p {
  font-size: 20px;
}

.section-inner {
  height: inherit;
}

#parallelogram {
  width: 100%;
  height: inherit;
  transform: skew(-40deg);
  position: relative;
  top: 0;
  overflow: hidden;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  height: inherit;
  width: 100%;
  transform: skew(40deg);
}

It would be a great pleasure if someone could help me out with this.

Thanks in advance.

Answer 1

I see this question (about slanted edges) and line of thinking (to use skew) come up frequently. Skew is super cool, and useful for some effects, but IMO this isn't one of those times.

I'd recommend adding an :after pseudo element and creating a CSS triangle to create the effect you want. This will eliminate the need to undo the skew for the content.

To keep the image and content elements at equal width I've used a width of calc(50% +/- Xpx) but this is just nitpicky stuff. If you don't mind one side being a little larger/smaller you can set the width of both to a fixed 50%.

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: calc(50% - 25px);
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.partial-section h1 {
  font-size: 30px;
}

.partial-section p {
  font-size: 20px;
}

.partial--padded {
  padding: 20px;
}

.section-inner {
  height: inherit;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  top: 0;
  background-repeat: no-repeat;
  height: inherit;
  width: 100%;
}

.slanted {
  position: relative;
  width: calc(50% + 25px);
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.slanted:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0;
  width: 0;
 border-bottom: 450px solid red;
 border-left: 50px solid transparent;
}

<div class="container">
  <div class="slanted">
      <div class="image"></div>
  </div>
  <div class="partial-section partial--padded">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

If you really want to use a skew to get some experience with it, we can still go the :after pseudo element route, create a red rectangle, and skew it to make a slanted edge. This again eliminates the need to undo a skew on the inner content.

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.partial-section h1 {
  font-size: 30px;
}

.partial-section p {
  font-size: 20px;
}

.partial--padded {
  padding: 20px;
}

.section-inner {
  height: inherit;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  top: 0;
  background-repeat: no-repeat;
  height: inherit;
  width: 100%;
}

.slanted {
  position: relative;
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
  overflow: hidden;
}

.slanted:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: -25px;
  width: 50px;
  height: 100%;
  background-color: red;
  -webkit-transform: skew(-5deg);
  -moz-transform: skew(-5deg);
  -o-transform: skew(-5deg);
  transform: skew(-5deg);
}

<div class="container">
  <div class="slanted">
      <div class="image"></div>
  </div>
  <div class="partial-section partial--padded">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>