Forums

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
    Posts
  • February 21, 2012 at 7:11 pm #36771
    IrishFaithful
    Member

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

    Live View

    February 21, 2012 at 7:18 pm #97151
    joshuanhibbert
    Member

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

    February 22, 2012 at 10:13 am #97183
    Paulie_D
    Member

    Without getting into the RGBa (which doesn’t relate to skewing) it’s certainly possible to skew a rectangle (CSS3 only for browser support).

    http://jsfiddle.net/Paulie_D/Hfkk7/1/

    I’m still not entirely sure what the OP is after however.

    February 22, 2012 at 3:39 pm #97239
    IrishFaithful
    Member

    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!

    February 22, 2012 at 10:15 pm #97268
    IrishFaithful
    Member

    I do not understand what is going on

    Live Link

    February 22, 2012 at 10:48 pm #97276
    IrishFaithful
    Member

    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

    February 23, 2012 at 3:16 pm #97310
    IrishFaithful
    Member

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

    August 28, 2013 at 6:58 am #148359
    dsmcclintock
    Participant

    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.

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