- This topic is empty.
February 21, 2012 at 7:11 pm #36771
I was wondering how would I skew one side of a rectangle taking into account for RGBA.February 21, 2012 at 7:18 pm #97151joshuanhibbertMember
Can you please go into more detail in regards to what you are after.February 22, 2012 at 10:13 am #97183Paulie_DMember
Without getting into the RGBa (which doesn’t relate to skewing) it’s certainly possible to skew a rectangle (CSS3 only for browser support).
I’m still not entirely sure what the OP is after however.February 22, 2012 at 3:39 pm #97239
cnwtx THANK YOU!!
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!February 22, 2012 at 10:15 pm #97268February 22, 2012 at 10:48 pm #97276
Nevermind, I got it!
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! <3February 23, 2012 at 3:16 pm #97310
yeah i know, I often use the :before, :after display:table; clear methodAugust 28, 2013 at 6:58 am #148359dsmcclintockParticipant
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.
Feedback or criticism welcome.
- The forum ‘CSS’ is closed to new topics and replies.