CSSで吹き出しをつくる
前回こちらの記事で三角形をを作る方法をみていきました。
今日はその三角形を使って吹き出しを作っていく方法をみていきます。
ベタ塗りの吹き出しをつくる
吹き出しは四角形と三角形を合わせてつくります。
と
を組み合わせることで
吹き出しを作ることができます。
では早速作り方を見ていきましょう。
長方形のcssはこのように指定しています。
.box {
position: relative;
width: 200px;
height: 100px;
background: #ccc;
}
ふきだしの下の三角形はboxにbefore疑似要素で指定します。
.box:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px;
border-color: #ccc transparent transparent transparent;
positon:absolute;
right:20px;
bottom:-19px;
}
ポイントは.boxをposition:relative;に、before要素はposition:absolute;にすることです。
rightとbottomを指定して場所を決めます。
縁取られた吹き出しをつくる
次はベタ塗りではなく、縁取られた吹き出しを作っていきます。
長方形のcssはこのように指定しています。
.box {
position: relative;
width: 200px;
height: 100px;
border:2px solid #ccc
}
塗りつぶしをなくしてborderを設定しました。
次に吹き出しの三角形です。
長方形ではbackground-colorが指定できましたが、
三角形を作っているのはborderです。
border自体の色を指定することはできますが、borderの境界線の色は指定出来ません。
そのためafter要素を指定して1pxだけ上にずらして作ります。
after要素はbefore要素の上にくる仕様なので縁取られたように見える三角形ができます。
.box:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px;
border-color: #ccc transparent transparent transparent;
positon:absolute;
right:20px;
bottom:-20px;
}
.box:after {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px;
border-color: #fff transparent transparent transparent;
positon:absolute;
right:20px;
bottom:-18px;
}
そうすると
このように縁取られた吹き出しになります。
before要素とafter要素をうまく使うことで吹き出しだけじゃなくリボンなど様々な形をcssで作ることができます。
画像を使わずにCSSで色々な形を作れるようになると細かな調整がしやすくなります。
デザインを見てCSSでできるかもと思ったら一度チャレンジしてみましょう。
