Reply To: CSS Transform Skew One Side with RGBA

[dsmcclintock]

I know this is an old thread, but I recently had to do something similar; two rectangles side-by-side, with the two inside edges slanted. Skew didn’t work because it extended the rectangles outside the canvas area. After doing it a few ways (none of which I was happy with due to being too “hacky” for my taste), I managed to pull it off using :before and :after pseudo-elements.

See demo at CodePen here: http://cdpn.io/ljeis
On Github: https://gist.github.com/danielsmcclintock/6366328

Feedback or criticism welcome.