CSS: Text-width based quadrilateral button

Question

I wanted to make these quadrilateral shape buttons with css: http://grab.by/I3Ku

So far, I could make a trapezium that is text based and has a hover effect. No I want the same but the top and bottom line has to be an oblique line. Can Someone help me out how I need to do this?

Codepen: http://goo.gl/RWZAuh

Answer 1

Try using a image or SVG as div background. Easier and more flexible that CSS based shapes