CSSでパネルに立体的な折り目を付ける方法
CSSでパネルの端を奥に折り曲げるギミックを紹介します。
before要素で土台と同じ背景を少し外へ伸ばします。
after要素で少し暗めの同系色の四角形を適切な位置へ移動させ、三角形に整形します。
帯を奥側に折り曲げる
今回はCSSテクニックで、パネルの端に山形の折り目を付ける方法をご紹介します。
パネルの端が奥に折り曲げられ、その折り目からパネルの裏側が見えている演出です。
パネルが浮き上がった様に見え、要素に立体感を出す事ができます。
これまでも紹介してきた疑似要素（before・after）を使って実現していきます。
ソースコード
ではソースコードの紹介です。
丸ごとコピーして使えますので是非ご利用ください。
HTML
<div class="author-box"> <div class="box"> <h4>パネルが奥に折れ込んだ状態</h4> </div> </div>
HTMLは要素の外を2つのボックス要素で囲っています。
それが「author-box」と「box」です。
2つで囲む理由
実際に折り目を実現するのはauthor-boxのみで、boxは影響してません。
しかしbox要素が無いと、中のテキストが折り目パネル（絶対配置の要素たち）の下に隠れてしまいます。
なので常にauthor-boxパネルの上に乗せるため、boxで囲んであります。
CSS
.author-box{ position: relative; display: block; padding: 10px 0px 10px 20px; background: #cc0000; margin-bottom: 23px; } .author-box:before{ position: absolute; content: ''; background: #66cc00; width: calc(100% + 40px); height: 100%; right: -40px; top: 0px; } .author-box:after { position: absolute; content: ''; background: #ff0000; width: 20px; height: 25px; top: -25px; right: -40px; clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%, 0% 0%); } .author-box .box{ position: relative; display: block; padding: 4px 0px 6px 0px; min-height: 60px; }
大まかな仕組み
まずはauthor-boxで土台のパネルを構成します。
さらにbefore要素で同色のパネルを土台の上に重ね、土台よりも少し右へ伸ばします。
次にafter要素でパネルの裏側になる長方形を作ります。パネルの裏側に見えそうな配色にしましょう。
最後にclip-pathで長方形を三角形に切り取っています。
実例サンプル
上記の様にパネルの右端がカクッと奥に曲がっている様に見えます。
実際にはbeforeで土台と同じ色のパネルが少し右側に配置され、afterの三角形（別色）が右上に設置してあるだけです。
これでパネルが外に伸びて、さらに奥に折れ曲がっているように見えるのです。
この時afterの三角形は土台パネルより少し暗い同系色にして、「裏側」の雰囲気を出すと効果的です。
CSSの解説
では一つずつCSSを解説していきましょう。
土台要素のCSS
まずauthor-boxにはposition: rerative;を設定します。
marginやpaddingはその場に合わせて設定して問題はありません。
背景色はパネルの「土台色」となりますので、演出したい色を設定します。
before要素のCSS
次にbefore要素を設定します。
position: absolute;とcontent: '';を確実に入れておきます。
背景色は親要素と同じものにして、土台要素の上に覆いかぶさるようになります。
calc計算で横に伸ばす
次にbefore要素の長さが常に親要素の幅＋40pxになる様、calc計算式を入れています。
calc計算した場合、土台よりも「左方向に」40pxだけ広がります。
この左側のズレを直すため、40px右側に移動するよう絶対配置right: -50px;を入れています。
そうすると土台位置よりも右に40pxずれたbeforeパネルができますね。
10pxだけ右に伸ばして色を変えたサンプル
上は土台（赤）とbefore（緑）で、重なりがわかりやすい様に各数値を変えた例です。
beforeパネルを土台と同色にして右側に伸ばす事で、要素が外にはみ出したように見える訳ですね。
高さは親要素と同じ100％で敷き詰めています。
after要素のCSS
次にafter要素を設定します。
ここがパネルの折れ曲がった部分に相当します。
before同様にposition: absolute;とcontent: '';を確実に入れておきます。
少し暗めの色で裏側を演出
背景色については、土台やbeforeと同系色でかつ「少し暗めの色」にしましょう。
ここでパネルの裏側の色を演出する事になります。
長方形を形成・移動
折れ曲がった箇所のみですで、サイズはそれぞれ以下の長方形にしています。
width: 20px;
height: 25px;
この長方形を少し右上にずらすため、以下の設定で移動しています。
top: -25px;
right: -40px;
これで長方形が右上に移動した状態になります。
長方形（赤色）の位置サンプル
赤色の長方形が所定の位置に設置されています。後はこの長方形が三角形になるだけです。
clip-pathでの切り取り
最後にこの長方形をclip-pathで切り取ります。
下記の様に書く事で三角形に切り取ってくれます。
clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%, 0% 0%);
左上から右下へ斜めに削り取っていますね。
この様にする事でパネルが折れ曲がっている様に見える訳です。
box要素のCSS
最後に内側に入れたbox要素の設定です。
各種スタイルは自由ですので、その場の環境に合わせて設定してOKです。
常にパネルの上に来るように
ただしposition: relative;だけは入れておきましょう。
今はauthor-boxのbefore要素が上に重なっている状態なので、このままだと要素がパネルの下に隠れて中身が見えなくなります。
position: relative;を入れるとbefore要素のパネルの上に来てくれます。
まとめ
解説は以上です。CSSの仕組みはすごく簡単ですね。
フラットなデザインが主流の今、グラデーションとはまた違った立体的な演出として好まれます。
多様は禁物ですが、ピンポイントで利用するとぐっと引き締まると思います。
是非お試しください。
