2013-08-21 67 views
0

所以我試圖在CSS中進行偏斜分離(僅)。它應該看起來有點像這裏:http://i.stack.imgur.com/hVCa1.pngcss中的偏斜分離

我試過用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> 
+0

郵政編碼請。 – thatidiotguy

回答

0

正如你所指出的那樣,這可以用CSS3僅完成,但並不是所有的瀏覽器都支持它。對於完整的瀏覽器支持,我會使用jQuery

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

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

有一些事情可以做。

  • 你可以使用轉換與像CSSSandpaper到 一個填充工具使其跨瀏覽器兼容。雖然,要獲得這種類型的 分離(div的一邊是直的),您可能必須使用 偏斜和perspective

  • 您可以使用CSS triangle trick之前和之後的 僞類來製作人造分隔符。這也是 需要一個虛擬類像Selectivizr polyfill。你 也必須玩border-width值得到 它匹配你正在尋找。

  • 您可以使用PNG前/後僞類。

  • 您可以使用SVG在容器周圍繪製邊框。

其中的任何一種都可以工作,但它絕對不像圓角或陰影那樣容易。你需要做一些額外的工作來獲得這些類型的結果。