using :before is not only better, the angle looks more defined as well. I had some problems where the skew being jagged with linear-gradients, rgba borders, and even overflow: hidden!
You are using the triangle borders with :before, that’s absolute genius! I no longer have to counter the skew for the text as well!
I wanted to have a border around the rectangle with one skew, but I think I can live with this method!
If anyone knows how to do this with skew, please advise!
I’ve helped people on codingforums for the past year, but when I needed a question answered, no one knew how. Sorry for the multiple forum post, but this forum is way more professional!
I was actually pretty hesitant to use :before since the browser support would be different from skew. I just set .claw-main to 100% width and used overflow: hidden; on the parent. This method will work in all browsers, since I’ll be using the matrix filter for ie6-8.
Big thanks to everyone!!! Really appreciate cnwtx effort! <3
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.