How to use skew property

Question

I am trying to make something like this:

My css3 styling is not one of the bests yet but the running snippet is what I tried and I cannot even see the content properly.

Please Help.

.wrapper{
    max-width: 600px;
    margin: 0 auto;
}

.wrapper-inner{
    background: red;
    position: relative;
    width: 100%;
}

.wrapper-inner:before{
    position: absolute;
    content: '';
    background-color: red;
    top: -6px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transform: skewY(1.5deg);
    -ms-transform: skewY(1.5deg);
    transform-origin: right top;
}

<div class="top">
    <h1>HEADING 1</h1>
</div>
<element />
<div class="wrapper">
    <div class="wrapper-inner">
        <div class="content-wrapper">
            <p> Lorem ipsum ...</p>
        </div>
    </div>
</div>

Answer 1

UPDATE:

As you mentioned you want only the top right side of the div to be skewed. The best way to do that is to add a div inside the wrapper

<div class="top"></div>
<div class="wrapper">
  <div class="skew"></div>
   ....
</div>

and skew this div and position it absolute relative to the wrapper

In this way you can have the effect as shown in the image without worrying about the content of the wrapper being skewed.

CSS

.skew{
  position: absolute;
  background-color: #ca3030;
  -webkit-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  transform: skewY(1deg);
  transform-origin: right top;
  top: 0px;
  width: 100%;
  height: 25px;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index:0;
}

CHECK THE UPDATED CODE HERE:

.top {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.wrapper {
  position: relative;
  top: -25px;
  background-color: #ca3030;
  max-width: 90%;
  margin: 0 auto;
  border-radius: 8px;
  border-top-left-radius: 0px;
  z-index:1;
}

.skew {
  position: absolute;
  background-color: #ca3030;
  -webkit-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  transform: skewY(1deg);
  transform-origin: right top;
  top: 0px;
  width: 100%;
  height: 25px;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index:0;
}

.wrapper {
  padding: 10px 20px;
}

.content-wrapper {
  color: white;
  margin: 5% 2%;
}

.content-wrapper .head {
  font-size: 1em;
}

.content-wrapper .sub-head {
  font-size: 0.8em;
}

.anchor {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ca3030;
  position: absolute;
  bottom: -9px;
  left: 45%;
}

<div class="top"></div>
<div class="wrapper">
  <div class="skew"></div>
  <div class="wrapper-inner">
    <div class="content-wrapper">
      <p class="head"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, commodi maiores quo ex molestiae accusamus assumenda quae! Corporis!</p>
      <p class="sub-head">
        perferendis ducimus suscipit sequi officia earum asperiores consectetur illo minus similique, rem
      </p>
    </div>
    <div class="anchor"></div>
  </div>

</div>