css - css中的倾斜分离

Question

所以我试图在 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>

Answer 1

正如您所指出的，这只能使用 CSS3 来完成，但并非所有浏览器都支持它。对于完整的浏览器支持，我会使用 jQuery

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

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