title: Skew element horizontally but just right side
body: <p>i want to have design as exactly below by help of HTML 5 and CSS 3. Here is <a href="http://jsfiddle.net/ppz4L/" rel="nofollow noreferrer">jsfiddle</a> how i do it.</p>
  
  <p><img src="https://i.stack.imgur.com/LOEup.jpg" alt="enter image description here"></p>
  
  <p>Here is the example codes</p>
  
  <pre><code>&lt;div class="header"&gt;Akşam Sizin İçin Önerdiklerimiz
      &lt;div class="skew"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="line"&gt;&lt;/div&gt;
  
  .header {
      color: white;
      font-size: 14px;
      display: inline-block;
      padding: 5px 10px;
      background-color: #6b6a69;
      position: relative;
  }
  .skew {
      position: absolute;
      -moz-transform: skewX(45deg);
      -ms-transform: skewX(45deg);
      -o-transform: skewX(45deg);
      -webkit-transform: skewX(45deg);
      transform: skewX(45deg);
      right: -14px;
      display: inline-block;
      width: 40px;
      height: 30px;
      top: 0;
      background: inherit;
      z-index: -1;
  }
  .line {
      height: 11px;
      background-color: #6b6a69;
      margin-top: -7px;
  }
  </code></pre>
  
  <p>As you have seen that i used 3 html element to build this. What i want to achieve is to give a gradient background-color for whole that design. But there are 3 different elements so i can only apply gradient for each element separately and that wouldn't look as i want.</p>
  
  <p>So i am trying to achieve that design by only 1 element via CSS 3 features like transformations.
  At least skewing only right side as in the picture via removing div.skew element would be an improvement for me. </p>
  
  <p>If it is possible to do that so how can i do that ?</p>
  
  <p>Edit: Here is <a href="http://jsfiddle.net/ppz4L/2/" rel="nofollow noreferrer">example</a> how it looks when i apply gradient so that is why i want to simply remove extra elements for applying gradient to whole design. </p>