1

私はこのようなことをしようとしています:

ここに画像の説明を入力

ボックスには影があり、コーナーの背景はイメージの上にあるため (予測できない背景)、透明にする必要があります。

Google で検索したところ、疑似セレクター:beforeを使用:afterした解決策と追加のマークアップを使用した解決策が見つかりましたが、それらはすべて固定色の背景を使用しています。これらは私の結果でした：

ここに画像の説明を入力

大きな完全な背景ではなく、ボックスの影と隅に小さな画像のみを使用しようとしています。

どうすればこれを行うことができますか？

4

1 に答える 1

3

両方の疑似要素を使用します。1 つは上のボックス用、もう 1 つは白い三角形用です。

h1 {
    background: #F0B032;
    box-shadow: 1px 1px 4px #362708;
    line-height: 30px;
    position: relative;
}
h1:before, h1:after {
    content: '';
    position: absolute;
    left: 100%;
}
​h1:before {
    background: #F0B032;
    box-shadow: 1px 1px 2px #362708;
    width: 15px;
    height: 16px;
    top: 0;
}
h1:after {
    border: 7px solid transparent;
    border-left-color: #fff;
    border-top-color: #fff;
    bottom: 0;
}

ここにフィドルがあります: http://jsfiddle.net/Kjp6v/

これは折り目の下に影を追加しませんが、十分にリアルに見えます.

于 2012-09-02T22:48:22.987 に答える