CSS WEB制作

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

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

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

 

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

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

ふきだし 

 

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

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

サンプルコード

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

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

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

 

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

CSSで三角形を作る方法

まとめ

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

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

 

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

-CSS, WEB制作
-

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