background-image：trapeze CSS3

Question

今天我再次与空中飞人挣扎（yay）！

这是怎么回事：

我有一个这样的模板：

（这是一个烟盒模板）

我正在尝试用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;
    }

使用此代码，我有：

右侧的两个部分，右侧底部的空白部分和右侧顶部的空白部分

所以我的问题是：我如何得到这样的东西：

使用绝对位置不会使白色部分消失，而且我有点卡住了！

感谢您的时间，我在这里等待您的答案，并乐意在需要时为您提供更多信息

Answer 1

问题是对角线。所以要避免它，你可以做到以下几点：

• .cote-droit-bot可能会停在对角线部分的开头
• .cote-droit-top可以从过滤器上方的黄色背景和红线下方获取，以获得正确的高度。

这是您的代码，背景和高度略有移动。这个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;        
}