background-image：空中飛人CSS3

Question

今天我再次與空中飛人（耶）奮鬥！

這是怎麼一回事呢：

我有一個模板，它是這樣的：

（這是一個煙盒模板）

我想在CSS中，以重新創建包的右側：

HTML

<div class="cote-droit"> 
    <div class="inner"> 
     <div class="cote-droit-top"></div> 
     <div class="cote-droit-bot"></div> 
    </div> 
</div> 

CSS

.cote-droit .inner 
    { 
     position: relative; 
     height: 293.04px; 
     width: 64.076px; 
    } 
.cote-droit-top 
    { 
     width: 64.076px; 
     height: 72.49px; 
     background: url(pack.png) -227.567px -604.822px no-repeat; 
    } 

.cote-droit-bot 
    { 
     width: 64.076px; 
     height: 220.55px; 
     background: url(pack.png) -227.567px 0 no-repeat; 
    } 

有了這個代碼，我有：

哪些是右側的兩個部分，空白部分在r的底部飛行側和右側的頂部的空白部分

所以我的問題是：我如何得到這樣的：

使用絕對位置不會使白色部分消失，我有點卡住了！

感謝您的時間，我等着你的答案在這裏，並在必要時

Answer 1

的問題是對角線很樂意給你更多的信息。因此，爲了避免它，你可以做到以下幾點：

• .cote-所有權，機器人會停止在對角部分的開始
• .cote-所有權頂部可能從黃色背景過濾器上面取並在紅線下方以獲得正確的高度。

這是您的代碼，具有背景和高度的輕微運動。這個not yet what you are looking但它可能足夠接近給出一些想法。

更新：我刪除了cote-droit-top的背景圖像，並使用背景顏色代替。 This solution should come pretty close（至少它是直到我讀你最近的評論）

.cote-droit .inner 
{ 
    position: relative; 
    height: 293.04px; 
    width: 64.076px; 
} 

.cote-droit-top 
{ 
    width: 64.076px; 
    height: 34px; 
    background: url(http://i.stack.imgur.com/uiluV.jpg) -227.567px -604px no-repeat;   
} 

.cote-droit-bot 
{ 
    width: 64.076px; 
    height: 180px; 
    background: url(http://i.stack.imgur.com/uiluV.jpg) -227.567px -40px no-repeat;   
}