3

私はインターネット全体で私の質問に答える、または少なくとも私に出発点を与える何かを探しました。

これが可能であれば、純粋なCSSで以下の画像を作成したいと思います。

最も簡単な方法は、背景画像またはスプライトを使用してこの効果を作成することです。ただし、これはレスポンシブWebサイトになるため、画像の拡大縮小がうまくいかず、破損する可能性があります。また、これはサイト全体でボタンとして機能するサイドバーアイテムであるため、入力するテキストの量を制御することもできません。 、検索入力と一般的なテキスト。

WebサイトはすでにJavaScriptが豊富であるため、JavaScript以外のソリューションが理想的です。さらに、JavaScriptは扱いません。

CSSのグラデーションを多用していると思いますが、効果を4つのセグメントに分割し、テキストの量に応じて縮小できるようにする方法がわかりません。

ボックスの3Dの側面は、ある時点で心配する必要がある他の何かです。

ヘルプやポインタは大歓迎です。

4

1 に答える 1

4

純粋なCSS（3）を使用してそれを行うことができます。必要transform:skew()です。各ボックスには独自のがありdivます。それぞれのCSS div。:before疑似要素は、2つの下部要素の不要な上部スキューを「修正」するために必要です。

HTML

​<div class="origami">
    <div class="origami-box origami-box1"></div>
    <div class="origami-box origami-box2"></div>
    <div class="origami-box origami-box3"></div>
    <div class="origami-box origami-box4"></div>
    <div class="origami-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.origami {
    margin-top:100px;
    margin-left:100px;
    width:160px;
    position:relative;
}
.origami-box {
    height:80px;
    width:80px;
    float:left;
}
.origami-box1 {
    background:red;
    -webkit-transform:skew(0deg,-4deg);
    -moz-transform:skew(0deg,-4deg);
    transform:skew(0deg,-4deg);
}
.origami-box2 {
    background:blue;
    -webkit-transform:skew(0deg,4deg);
    -moz-transform:skew(0deg,4deg);
    transform:skew(0deg,4deg);
}
.origami-box3 {
    background:green;
    -webkit-transform:skew(0deg,4deg);
    -moz-transform:skew(0deg,4deg);
    transform:skew(0deg,4deg);
}
.origami-box.origami-box3:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    top: -3px;
    background: green;
    -webkit-transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    transform: skew(0deg,-4deg);
}
.origami-box4 {
    background:yellow;
    -webkit-transform:skew(0deg,-4deg);
    -moz-transform:skew(0deg,-4deg);
    transform:skew(0deg,-4deg);
}
.origami-box.origami-box4:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    top: -3px;
    background: yellow;
    -webkit-transform: skew(0deg,4deg);
    -moz-transform: skew(0deg,4deg);
    transform: skew(0deg,4deg);
}
.origami-content {
    position:absolute;
    top:10px;
    padding:10px;
}​

デモ： http： //jsfiddle.net/Qwd4R/1

于 2012-12-25T19:27:05.600 に答える