2

今日もまた空中ブランコに苦戦(イェーイ)！

方法は次のとおりです。

次のようなテンプレートがあります。

与える

（たばこのパックのテンプレートです）

私は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;
    }

このコードで、私は持っています:

上

下

右側の 2 つの部分で、右側の下部に空白部分があり、右側の上部に空白部分があります

だから私の質問は:どうすればこのようなものを手に入れることができますか:

与える

絶対位置を使用しても白い部分が消えず、ちょっと行き詰まっています !

お時間をいただきありがとうございます。こちらでご回答をお待ちしております。必要に応じてさらに情報を提供させていただきます。

4

1 に答える 1

1

問題は対角線です。したがって、それを回避するには、次のことができます。

  • .cote-droit-bot が対角線の始点で止まることがある
  • .cote-droit-top は、フィルターの上と赤い線の下の黄色の背景から取得して、適切な高さを取得できます。

これは、背景と高さを少し動かしたコードです。これはまだあなたが探しているものではありませんが、いくつかのアイデアを与えるのに十分近いかもしれません.

更新: cote-droit-top の background-image を削除し、代わりに background-color を使用しました。この解決策はかなり近いはずです（少なくとも、最近のコメントを読むまではそうでした）

.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;        
}
于 2013-04-29T19:38:33.453 に答える