css - CSS中的倾斜分离

因此，我试图在CSS中进行倾斜分离（仅）。在这里看起来应该像这样：http://i.stack.imgur.com/hVCa1.png

我已经使用CSS转换（transform: skew(-15deg);）进行了尝试，但是我认为它不能在所有浏览器中都可以使用，并且不是真正的自适应。我曾考虑过使用线性渐变进行制作，但不确定是否更好。

你们知道更好的解决方案吗？

编辑：这是代码：

.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%; }

和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>

最佳答案

如您所指出的，这只能使用CSS3来完成，但是并非所有浏览器都支持。为了获得完整的浏览器支持，我将使用jQuery

演示http://jsfiddle.net/kevinPHPkevin/UkAfD/26/

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