title: css3 div and anchor tag skew transform in different sides
body: <p>I have a two div's and one anchor tag. Now the first div, I want to transform skew it only the right side of the div and the second div, I want to transform skew it only on the left side. The anchor tag, I want it to transform skew both left and right side (please refer to the image attach).</p>
  
  <p>my html codes are:</p>
  
  <pre><code>&lt;div class="box box1"&gt;&lt;/div&gt;
  &lt;div class="box box2"&gt;&lt;/div&gt;
  &lt;a class="theanchor" href="index.html" target="_blank"&gt;Home&lt;/a&gt;
  </code></pre>
  
  <p>and my css codes are:</p>
  
  <pre><code>.box{
  width: 900px;
  height: 300px;
  background: red;
  }
  .theanchor{
  display: block;
  padding: 8px 13px;
  background: blue;
  text-decoration: none;
  }
  </code></pre>
  
  <p>and what i tried so far and my first source to figure things out is:</p>
  
  <pre><code>transform:skewX(10deg));
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/5xCeb.jpg" alt="enter image description here"></p>
  
  <p>but nothing works, if anyone here could point me how to do it or how to make it, it would be greatly appreciated. Thank you in advance.</p>