title: Trying to manipulate only One side of a div
body: <p>I am attempting to manipulate a div with css to avoid using an image to mimic the one below.  So far I have it skewed, but is there any way to grab a corner and position it below the horizontal line?  The shape appears to be a square with the lower left corner a tad bit skewed.  I cant seem to figure out how to pull that one corner with out skewing the top corner as well. </p>
  
  <p><a href="http://i.stack.imgur.com/iNxg9.png" rel="nofollow">skewed div shsape</a></p>
  
  <p>Heres what I have so far: </p>
  
  <pre><code>.educationcontentdiv {
  background-color: #f9da0b;
  padding: 30px;
  -webkit-transform: skewY(1deg);
  -moz-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  -o-transform: skewY(1deg);
  transform: skewY(1deg);
  </code></pre>
  
  <p>}</p>
  
  <p>I have also tried to only skew the one side and it works well, but the corner is still on the same line as its opposing side: </p>
  
  <pre><code>margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);
  background: red;
  overflow:hidden;
  position:relative;
  </code></pre>
  
  <p>Any Help would be appreciated </p>