The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Transform Skew One Side with RGBA

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #36771

    I was wondering how would I skew one side of a rectangle taking into account for RGBA.

    Live View


    Can you please go into more detail in regards to what you are after.


    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.


    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!

    Codingforum post
    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 do not understand what is going on

    Live Link


    Nevermind, I got it!

    Live Link
    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


    yeah i know, I often use the :before, :after display:table; clear method


    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:
    On Github:

    Feedback or criticism welcome.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.