たまにブログとかの見出しなんかで見かける紙を折り曲げたような感じで立体に見せるやつあるじゃないですか？

うまく説明出来ませんが、こんなやつです↓

これを、画像を使わないでやる方法を思いついたのでとりあえずメモです。

因みに思いついてすぐ記事を作ってるので他の人がもう既にやっているかもしれませんがそのへんは気にしないでください（←

やり方を考える

一言で言ってしまえば、少し前に流行った、CSSだけで吹き出しを作る方法の応用です。

あれは擬似要素に一部だけ色を付けたぶっといボーダーを指定し、それをポジション指定していました。

そもそもボーダーは太いボーダーに対して上下左右それぞれに違う色を割り当ててみるとわかりますが、縦線と横線の境目は斜めになっています。

 つまり、1箇所だけ色を付けた太いボーダーをつくると、三角形がつくれるんですね。

上の例では上下左右指定しましたが、実はこれ、上と右だけとか、左と、下だけみたいな指定をすると、どうなるでしょうか？

 これって片方透明（あるいは背景色）にすれば、なんかこのへんの形に似てきません？

あとはなんとなく判ると思いますが、これを二種類用意して、position:absoluteとかで要素の下にくっつけてあげれば完成できそうですね。

作ってみる

今回はh1要素に書きました。

 折れ曲がってる部分は position:absolute で指定するので、まず h1 には position:relative を指定します。

 あとは、擬似要素の before と after にそれぞれサイズ0、コンテントなしの要素を用意します。

そしてボーダーをそれぞれ指定して片方は h1 の帯よりちょっと暗めの色（影がおちてるイメージ）もう片方を背景色（またはtransparent等の透過指定）にします。

ボーダーのそれぞれの関係は先程のデモなどからうまいこと考えて下さい←

多分作るときは紙等に三角形部分をを描いてみるとやりやすいと思います。

デモ

というわけで、完成したデモです。

 今回は左右両方に付けましたが、片方だけ作ってもお洒落かもしれませんね。

その場合は before でやっても after でやっても大丈夫だと思います。（たぶん）

因みにそれぞれのボーダーの長さを弄ってあげることで折れ曲がった方の形を変形させることができ、ある程度折れ曲がりの角度やサイズ、折れ曲がったほうの長さなんかも制御できます。

いろいろ弄って気に入った角度を見つけてみてください。

それでは。