WEB制作

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

スポンサーリンク

吹き出し
今回は、擬似要素で三角形をつくり、吹き出し型のタイトルを作る方法を紹介します。

ちなみにこんなやつです↓

ふきだし 

いろいろなサイトを見たり、模写したりしているとけっこう見かけますよね。
でも、これってどうやるんだろ、という方は参考にしてください。



サンプルコード

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

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

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

 

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

CSSで三角形を作る方法

まとめ

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

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

 

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

スポンサーリンク

-WEB制作
-, , ,

© 2024 人生フリーハンド Powered by AFFINGER5