Перекошенные границы на Div

Я пытаюсь исказить div, похожий на это:Наклоните верхнюю часть div, используя CSS без перекоса текста или это:http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Вот изображение того, что я пытаюсь сделать:

По сути, мне нужно странным образом наклонить границывсе 4 стороны, Я могу сделать это с фоновыми изображениями, но я бы предпочел сделать это в CSS, чтобы элементы div могли реагировать по ширине и высоте. Я хотел бы найти решение, которое работает в старых браузерах, но я понимаю, что не могу иметь все!

Что было бы лучшим способом иметь наклонные границы со всех четырех сторон? (Примечание: граница в нижней части зеленой рамки наклоняется вверх в середине и вниз снаружи, и мне НЕ нужны границы для этого. Хороший уклон в одном направлении - это хорошо.)