今回は、擬似要素で三角形をつくり、吹き出し型のタイトルを作る方法を紹介します。
ちなみにこんなやつです↓
いろいろなサイトを見たり、模写したりしているとけっこう見かけますよね。
でも、これってどうやるんだろ、という方は参考にしてください。
サンプルコード
下記のコードを参考にしてみてください。
ブラウザ幅が可変したときに三角形がずれないよにpxは使っておりませんので、お好みで単位を変えてください。
See the Pen
Untitled by t.h (@tomtom15)
on CodePen.
詳しくはこちらを参考にしてください。
まとめ
コードの意味を解説するより、実際に色や数値を変えることで、どのように変化するか確認した方が理解が速いと思います。
いろいろとアレンジしてみてください。
他のタイトル装飾の記事も紹介しておきます↓ 続きを見る
【CSS】擬似要素を文字とかさねてオシャレな見出しをつくろう