当ブログでもサイドメニューにて適用させている、端がリボンのように折り返されて見えるデザインの見出しを、画像を使用せずCSSのみで表現する方法を紹介します。

CSSで三角形を表現する

リボンのようなデザインの見出しをCSSで表現するにあたっては、それより先にまず、CSSで三角形を表現する方法について習得する必要があります。

やり方は難しくありません。
例えば以下のように、ボーダーが極端に太い矩形があるとします。
分かりやすくする為に、上下左右全てのボーダーにそれぞれ異なる色を指定しておきます。

この矩形のwidthとheightの数値を、少しずつ小さくしていきます。

widthとheightの数値がいずれも0になると、矩形はボーダーだけが残る形になります。
ここで、4つ存在する辺のうちの3辺にborder-color:transparent;を指定し透明にすると…。

このとおり、ボーダーの太さを「高さ」とした直角二等辺三角形が出来上がります。

また、4辺中2辺のみを透明にすると、直角が上下左右ではなく左上・右上・左下・右下に位置するようになる三角形になります。
リボンのような見出しの「折り返し」の部分にはこの、CSSで表現した直角二等辺三角形を用いる事になります。

CSSでリボンのようなデザインの見出しを表現する

HTMLの方では複雑なマークアップを行う必要はありません。
<h1>や、あるいは<div>等、必要に応じたタグを配置して下さい。

仮に<h1>に適用させるとした場合、CSSは以下のようになります。
(※margin:0;等のリセットは割愛)

h1
{
position:relative;
margin-bottom:20px;
background-color:#eebccd;
}

h1:before,
h1:after
{
position:absolute;
bottom:-20px;
border-width:10px;
border-style:solid;
border-top-color:#caa8b4;
border-bottom-color:transparent;
content:"";
}

h1:before
{
left:0;
border-left-color:transparent;
border-right-color:#caa8b4;
}

h1:after
{
right:0;
border-left-color:#caa8b4;
border-right-color:transparent;
}

このように指定した見出しの表示サンプルが、以下のようになります。

ポイントは、:beforeと:afterとでそれぞれ先述の直角二等辺三角形を作り出し、それを<h1>に対して絶対配置させる事です。
以下、各プロパティに関して詳細に解説します。

h1

position:relative;	リボンの折り返しの箇所を絶対配置する為に、その基準となるべく指定しておきます。
margin-bottom:20px;	後述する、リボンの折り返しの箇所にて指定するボーダーの太さの2倍以上の数値を指定して下さい。 この数値を下回ると、折り返しの箇所が、見出しの後続の要素に重なる恐れがあります。
background-color:#eebccd;	見出しの背景。 お好きな背景色や背景画像をどうぞ。

h1:before,h1:after

position:absolute; bottom:-20px;	リボンの折り返しの箇所を絶対配置します。 bottomには、ボーダーの太さの2倍の分だけ、マイナスの数値を指定します。
border-width:10px; border-style:solid; border-top-color:#caa8b4; border-bottom-color:transparent;	直角二等辺三角形を構成するボーダーの指定をします。 border-widthの数値はお好みでどうぞ。
content:"";	:before及び:afterを認識させる為にはcontentプロパティが必須です。 今回は見出しの前後に文言等を表示させる予定はない為　""　としておきます。

h1:before

left:0;	リボンの折り返しの箇所を絶対配置します。
border-left-color:transparent; border-right-color:#caa8b4;	直角二等辺三角形を構成するボーダーの指定をします。 折り返しの箇所のボーダーの色は、見出しより少し暗くくすんだ色を指定するとよりそれらしくなります。

※h1:afterについてはh1:beforeの左右逆ver.になります。

リボンのようなデザインの見出しの配置の応用

よりリボンのように見せるには、見出しに、左右方向のマイナスのマージンを適用させると効果的です。

例えばリボンのような見出しが、paddingが15pxずつ指定された矩形の中に入っているとします。
このように表示される見出しに対し、「折り返し箇所のborder-widthが10pxずつ」＋「矩形のpaddingが15px」＝計35pxずつ、左右方向にマイナスのマージンを適用させると…。

このように見出しが横方向に引き伸ばされ、よりリボンのような見栄えになります。
あとは見出しにpadding・border-radius・box-shadow等、お好みで装飾を施して完成。

これで、HTMLはあくまでもシンプルに、なおかつ画像は一切使用せずに、CSSだけで目を引くような見出しを表現する事が出来ました。
:beforeや:afterを使いこなす練習にもなりますし、気になった方は是非試して、サイトやブログのデザインに取り入れてみて下さい。

z-index:-1;を用いる手法について

CSSの解説サイトによっては、リボンの折り返しの箇所について、2辺ではなく1辺のみを着色した直角二等辺三角形を用い、それにz-index:-1;を指定するという手法が紹介されている事があります。
bottomにborder-widthと同じ数値の分だけマイナスの数値を指定して絶対配置し、その重なりの順序を見出しより下位にする事で、直角の位置が左上や右上に来るように見せかける…という手法です。
確かに、そのような方法でも可能です。

しかしz-index:-1;を指定した要素は、多くの場合、その要素を含む親要素よりも重なりの順序が下位になってしまいます。
上記「リボンのようなデザインの見出しの配置の応用」での例でいうと、リボンの折り返し箇所にz-index:-1;を適用させると、見出しだけでなく、その親要素である矩形よりも下に位置するようになります。
その為、例でいう矩形に背景色や背景画像が設定されていると、折り返し箇所がその背景色や背景画像に覆い隠されて見えなくなってしまいます。
ゆえに、今回のような例においては、z-index:-1;を用いる手法は講じないのが良いかと思います。