【CSS】三角形の擬似要素をつくって吹き出し型のタイトルを作ろう　

タイトルの装飾を、下の向きの三角形にしたいけど、どうやるの？

という疑問にお答えします。

ということで今回は、吹き出し型のタイトルを作る方法を紹介します。

いろいろなWEBサイトで見かける写真のような装飾、これは擬似要素を使って三角形を作ります。

簡単ですのでぜひ参考にしてください。

それでは見ていきましょう。

サンプルコード

下記のコードを参考にしてみてください。

ブラウザ幅が可変したときに三角形がずれないよにpxは使っておりませんので、お好みで単位を変えてください。

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

詳しくはこちらを参考にしてください。

CSSで三角形を作る方法

まとめ

コードの意味を解説するより、実際に色や数値を変えることで、どのように変化するか確認した方が理解が速いと思います。

いろいろとアレンジしてみてください。

他のタイトル装飾の記事も紹介しておきます↓