skewed separation in css

Question

So I was trying to make a skewed separation in CSS (only). It should look kind of like this here: http://i.stack.imgur.com/hVCa1.png

I tried it with CSS transforms already (transform: skew(-15deg);), but I don't think it'll work in all browsers, and it's not really adaptive. I thought about making it with linear gradients, but I'm not sure if this is any better.

Do you guys know of any better solution for this?

EDIT: here's the code:

.results {
  width: 500px; }

.transf {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: grey !important;
  width: 6px;
  margin-left: -4px;
  margin-right: -5px;
  z-index: 1; }

.left_border {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: yellow;
  border-right: 1px solid green;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  width: 10px;
  margin-left: -15px;
  z-index: 2; }

.right_border {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: orange;
  border-left: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  width: 10px;
  margin-right: -20px;
  z-index: 2; }

.left {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  background: yellow;
  width: 30%;
  border: 1px solid green;
  z-index: 0; }

.right {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  background: orange;
  width: 20%;
  border: 1px solid red;
  z-index: 0; }

.item21 {
  width: 5%; }

.item22 {
  width: 15%; }

and the HTML:

<div class="results">
    <div class="left"></div>
    <div class="left_border"></div>
    <div class="transf"></div>
    <div class="right_border"></div>
    <div class="right"></div>
</div>
<div class="results">
    <div class="left item21"></div>
    <div class="left_border"></div>
    <div class="transf"></div>
    <div class="right_border"></div>
    <div class="right item22"></div>
</div>

Answer 1

As you have pointed out, this can be done with CSS3 only, but not all browsers support it. For full browser support i'd use jQuery

DEMO http://jsfiddle.net/kevinPHPkevin/UkAfD/26/

var skewed = false;
function skew() {
    skewed = !skewed;        
    $('#box').css({
        skewY: skewed ? '10deg' : '-10deg'
    });
}

Answer 2

There are a few things you could do.

• You could use transforms with a polyfill like CSSSandpaper to make it cross browser compatible. Although, to get that type of separation (with one side of the div being straight) you may have to use skew AND perspective.

• You could make a faux separator by using the before and after pseudo classes with the CSS triangle trick. This, too, would require a polyfill for pseudo classes like Selectivizr. You would also have to play around with the border-width values to get it to match what you are looking for.

• You could use a PNG using the before/after pseudo classes.

• You could use SVG to draw the borders around the containers.

Any of these would work, but its definitely not as easy as, say, rounded corners or drop shadows. You need to put in a little extra work to get those types of results.