CSS-Tricks

Forums Get help. Give help.

• IrishFaithful February 21 Permalink

  I was wondering how would I skew one side of a rectangle taking into account for RGBA.
  
  Live View
• joshuanhibbert February 21 Permalink

  Can you please go into more detail in regards to what you are after.
• Odd_E February 21 Permalink

  I believe he wants the left side of his div element to be skewed with css3, a property I don't know.
• cnwtx February 22 Permalink

  Here's one that uses a pseudo-element to add the angle, but I'm sure it's possible with a transform.
• Paulie_D February 22 Permalink

  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.
• IrishFaithful February 22 Permalink

  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!
• cnwtx February 22 Permalink

  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/
• IrishFaithful February 22 Permalink

  I do not understand what is going on
  
  Live Link
• cnwtx February 22 Permalink

  Can you explain what don't understand? Is this more like what you want: http://jsfiddle.net/djuKm/
• IrishFaithful February 22 Permalink

  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
• cnwtx February 23 Permalink

  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
• IrishFaithful February 23 Permalink

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