0

CSS を使用して、DIV の持ち上げられたコーナーを作成できました。ここにjsfiddleリンクがあります

親と同じように角を持ち上げた多くの子 DIV を設計する必要があります。どうすればこれを作ることができますか？

4

2 に答える 2

2

理想的には、シモーネの答えが機能するポイントまでコードを取得する必要があります。ただし、そのポイントに到達するには少し作業が必要になる場合があります。

最初の問題は、クラスdrop-shadowとliftedクラスが独立していないという事実に起因します。この醜い JSFiddle でわかるように、影を表示したいものに (変更された)drop-shadowクラスを追加する必要があります。div

drop-shadowただし、クラスを変更する必要がありました。drop-shadow:before, drop-shadow:after私がしたことは、子のドロップシャドウを隠していたセレクターの「z-index」値を取り除くことでしたdiv。

このことから、最初に行う必要がある編集を確認できます。追加する必要があります

.lifted:after,
.lifted:before {
    position: absolute;
    content: "";
}

これは、影を表示するために必要です ( を設定しないと、beforeおよびafter疑似要素が表示されないことに注意してくださいcontent)。しかし、これでは十分ではありません。その理由は、absolute配置によって 2 つの影が重なり合っているためです。

この JSFiddleliftedに移動し、子からクラスを追加/削除して、div私の意味を確認してください。

この JSFiddleでほぼ修正されますが、この質問と回答を参照して、修正されない理由を確認してください。それを使用して問題を解決できるはずです。

于 2012-10-15T20:28:36.893 に答える
1

.liftedjsFiddleにクラスがあります。必要なすべてのクラスで同じクラスを使用できますdiv。

于 2012-10-15T20:10:14.937 に答える