css中的偏斜分离

所以我试图在CSS中进行偏斜分离（仅）。它应该看起来有点像这里：http://i.stack.imgur.com/hVCa1.png css中的偏斜分离

我试过用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>

来源

2013-08-21 fabe

邮政编码请。 – thatidiotguy

正如你所指出的那样，这可以用CSS3仅完成，但并不是所有的浏览器都支持它。对于完整的浏览器支持，我会使用jQuery

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

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

来源

2013-08-21 18:49:29 Vector

有一些事情可以做。

你可以使用转换与像CSSSandpaper到一个填充工具使其跨浏览器兼容。虽然，要获得这种类型的分离（div的一边是直的），您可能必须使用偏斜和perspective。
您可以使用CSS triangle trick之前和之后的伪类来制作人造分隔符。这也是需要一个虚拟类像Selectivizr polyfill。你也必须玩border-width值得到它匹配你正在寻找。
您可以使用PNG前/后伪类。
您可以使用SVG在容器周围绘制边框。

其中的任何一种都可以工作，但它绝对不像圆角或阴影那样容易。你需要做一些额外的工作来获得这些类型的结果。

来源

2013-08-21 18:54:43

css中的偏斜分离

回答

相关问题