CSSで作る見出しの装飾 – リボン風のデザイン

  CSS

CSSを使ってHTMLの「見出し」を装飾してみます。

 

「リボン」風の装飾

前回「CSSで作る見出しの装飾 – 吹き出し風のデザイン」でも利用した、CSSの border プロパティを使った▼(三角形)を応用して「リボン」風の見出しを作ってみます。

border プロパティを使った三角形については「CSSで作る見出しの装飾 – 吹き出し風のデザイン」を参考にしてください。

 

包んでいるようなリボン – ブロック要素有り

見出し h1 の親要素 .ribbon-wrap を包むように .ribbon を装飾しています。

See the Pen SIMPLE RIBBON HEADLINE 1 by ctips (@ctips) on CodePen.0

 

片端をカットしてあるリボン

リボンの右端をカットしたような装飾です。
リボンの右端に背景と同じ色の▲を作成してカットして見えるように装飾しています。

See the Pen SIMPLE RIBBON HEADLINE 2 by ctips (@ctips) on CodePen.0

 

包んでいるようなリボン – ブロック要素無し

.ribbon-wrap を省いたリボンです。

See the Pen SIMPLE RIBBON HEADLINE 3 by ctips (@ctips) on CodePen.0

 

両端をカットしてあるリボン

リボンの両端に背景と同じ色の▲を作成してカットして見えるように装飾しています。

See the Pen SIMPLE RIBBON HEADLINE 4 by ctips (@ctips) on CodePen.0

 

両端をカット+折り目のあるリボン

上4つのリボンの応用です。

See the Pen SIMPLE RIBBON HEADLINE 5 by ctips (@ctips) on CodePen.0

 

 

  CSS     by