0

画像とタイトルを含む石積みスタイルのフロート要素で構成されるHTMLページを作成しようとしています。要素には影があり、ページにはわずかなグラデーションの背景があります。すでに訪問したターゲットには、折り畳まれたコーナーがあります。

私たちが達成しようとしていることの例

折りたたまれた角は、いくつかの問題を引き起こします。

1）要素のボックスシャドウの端を、右側と下側の折りたたまれたコーナーの前にするにはどうすればよいですか？div半透明のグラデーションを含むsを使用して、CSS3より前の方法でシャドウを作成する必要がありますか？

2）折りたたまれたコーナー自体をどのように行うのですか？ページの背景のグラデーションが透けて見える必要があるため、白い背景の上にある右下隅に画像を押し付けることはできません。

4

1 に答える 1

3

これまで、これを行う4つの方法を考えてきました。

方法1：この背後にある考え方は、上の2つの疑似要素を使用し.boxてコーナーを取得し、次に上の2つの疑似要素を使用.box-textしてコーナーの影を正しく取得することです-デモ。これの最大の問題はそれが...まあ、醜いということです。

HTML構造：

<div class="box">
    <header></header>
    <div class="box-text">
        <p>Text</p>
    </div>
</div>

関連するCSS：

body {
    background: #ccc;
}
.box {
    box-shadow: 2px 2px 13px #000;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
    position: absolute;
    content: '';
}
.box:before {
    bottom: -25px;
    right: -25px;
    width: 75px;
    height: 75px;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    box-shadow: -2px -2px 2px #777;
    background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
    bottom: 32px;
    right: -15px;
    width: 15px;
    height: 18px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
    bottom: -15px;
    right: 32px;
    width: 18px;
    height: 15px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}

方法2：その特定のコーナーに傾斜した疑似要素を使用してより良い方法で影を結合します（疑似要素に影があります）-デモ

これは見栄えが良く、IE9でも機能するという利点があると思います（前のものはCSSグラデーションを使用していたため、そうではありませんでした）。

HTMLはまったく同じで、CSSは次のようになります。

.box {
    box-shadow: 0 0 5px 1px #777;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    bottom: -38px;
    right: -38px;
    width: 71px;
    height: 71px;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    right: 0;
    bottom: 22px;
    width: 47px;
    box-shadow: 2px 2px 3px 1px #777;
    transform: skewY(-45deg);
}

方法3：前の方法からアイデアを得ました-デモ。前のものは少し良く見えると思いますが...

変更されたCSS：

.box:before {
    bottom: -24px;
    right: -7px;
    width: 35px;
    height: 70px;
    box-shadow: inset 2px 0 3px 1px #999;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    bottom: -27px;
    right: -10px;
    width: 35px;
    height: 70px;
    transform: rotate(45deg);
    background: #ccc;
}

方法4：両方ともボックスにある2つの疑似要素のみを使用します-デモ

.box:before, .box:after {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    right: -8px;
    bottom: 22px;
    width: 65px;
    box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
    transform: rotate(-45deg);
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
于 2012-08-03T11:43:30.367 に答える