Grow your CSS skills. Land your dream job.

CSS Transform Skew One Side with RGBA

  • # February 21, 2012 at 7:11 pm

    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

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

    # February 21, 2012 at 10:10 pm

    I believe he wants the left side of his div element to be skewed with css3, a property I don’t know.

    # February 22, 2012 at 9:23 am

    Here’s one that uses a pseudo-element to add the angle, but I’m sure it’s possible with a transform.

    # February 22, 2012 at 10:13 am

    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

    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 9:55 pm

    Hmmm… The one that I made doesn’t allow for transparency through the angled area. See here: http://jsfiddle.net/Hfkk7/4/ Here’s one that might work better for what you want: http://jsfiddle.net/Hfkk7/5/

    # February 22, 2012 at 10:15 pm

    I do not understand what is going on

    Live Link

    # February 22, 2012 at 10:45 pm

    Can you explain what don’t understand? Is this more like what you want: http://jsfiddle.net/djuKm/

    # February 22, 2012 at 10:48 pm

    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 1:17 pm

    Believe it or not, there is actually quite a bit better support for :before than for skew. See here: http://caniuse.com/css-gencontent and here: http://caniuse.com/transforms2d

    # February 23, 2012 at 3:16 pm

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

    # August 28, 2013 at 6:58 am

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".