html - 背景图像：空中飞人 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;
    }

使用此代码，我有：

分别是右侧的两个部分，右侧底部有空白部分，右侧顶部有空白部分

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

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

感谢您的宝贵时间，我在这里等待您的回答，如果需要，很高兴为您提供更多信息

Answer 1

问题是对角线。因此，为避免它，您可以执行以下操作：

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

这是您的代码，背景和高度略有移动。这还不是您正在寻找的东西，但它可能足够接近以提供一些想法。

更新：我删除了 cote-droit-top 的背景图像，并改用了背景颜色。这个解决方案应该非常接近（至少在我阅读你最近的评论之前）

.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;        
}