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

  CSS

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

 

「吹き出し」風の装飾

このサイトでも使用している「見出し」を「吹き出し」風に装飾する方法。

HTMLの「見出し」(h1~h6のブロック要素)に、CSSで▼(三角形)を加えて「吹き出し」風にしています。

 

border プロパティを使った三角形

今回はCSSの border プロパティを使って三角形を表現してみます。

 

CSSの border プロパティは border-width が同じであれば、ボーダーの角は45°の確度で接しています。
ですので、ブロック要素の高さと幅を0にするとボーダーの4辺( top ,  right , bottom , left )それぞれが同じ三角形になります。

See the Pen CSS BORDER by ctips (@ctips) on CodePen.0

 

また、「吹き出し」風のデザインには関係無いですが、このブロック要素の高さと幅を0以上にすると4辺( top ,  right , bottom , left )は台形になります。

 

See the Pen CSS BORDER 2 by ctips (@ctips) on CodePen.0

 

この border プロパティを使って作成した「三角形」をCSSの疑似要素と position を使って吹き出しの形を作ります。

 

下向きの吹き出し

See the Pen CSS BALLOON HEADLINE (bottom arrow) by ctips (@ctips) on CodePen.0

 

右向きの吹き出し

See the Pen CSS BALLOON HEADLINE (right arrow) by ctips (@ctips) on CodePen.0

 

上向きの吹き出し

See the Pen CSS BALLOON HEADLINE (top arrow) by ctips (@ctips) on CodePen.0

 

左向きの吹き出し

See the Pen CSS BALLOON HEADLINE (left arrow) by ctips (@ctips) on CodePen.0

 

 

 

 

  CSS     by