title: Skewed Borders on a Div
body: <p>I'm trying to skew a div, similar to this:
  <a href="https://stackoverflow.com/questions/13591584/slant-the-top-of-a-div-using-css-without-skewing-text">Slant the top of a div using css without skewing text</a>
  or this: <a href="http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/" rel="noreferrer">http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/</a></p>
  
  <p>Here's an image of what I'm trying to do:</p>
  
  <p><img src="https://s21.postimg.cc/5xbddn2uf/funkyboxes.jpg" alt="funky bordered boxes"></p>
  
  <p>Basically, I need to slant the borders in weird ways on <strong>all 4 sides</strong>. I can do this with background images, but I'd prefer some way to do this in CSS so the divs can be responsive in width and height. I'd like to find a solution that works on older browsers, but I understand I can't have everything!</p>
  
  <p>What would be the best way to have slanted borders on all 4 sides? (Note: the border on the bottom of the green box slants up in the middle, and down on the outside, and I do NOT need the borders to do this. just a slant in one direction is good.)</p>