cssでフキダシつくることあるよね。
そのたびに、えーっとどうやるんだっけなっつって検索してるのいちいち無駄なので、この際覚えた。
覚えた上でコピペできるように貼っとく。
コピペして適宜デザインに合わせて行って欲しい。
■下向きに▼がでてるフキダシ。
■左向きに◀がでてるフキダシ
■上向きに▲がでてるフキダシ
■右向きに▶が出ているフキダシ
色は白にしたので、変更したかったら#FFFFFFの2箇所を変えるだよ。
そのたびに、えーっとどうやるんだっけなっつって検索してるのいちいち無駄なので、この際覚えた。
覚えた上でコピペできるように貼っとく。
コピペして適宜デザインに合わせて行って欲しい。
■下向きに▼がでてるフキダシ。
.fukidashi{width:220px;background:#FFFFFF;padding:15px;position:relative;}.fukidashi:after{content:'';position: absolute;bottom:-10px;left:50%;margin:0 0 0 -5px;width:0;height:0;border-right:10px solid transparent;border-top:10px solid #FFFFFF;border-left:10px solid transparent;}
■左向きに◀がでてるフキダシ
.fukidashi{width:220px;background:#FFFFFF;padding:15px;position:relative;}.fukidashi:after{content:'';position: absolute;top:50%;left:-10px;margin:-5px 0 0 0;width:0;height:0;border-top:10px solid transparent;border-right:10px solid #FFFFFF;border-bottom:10px solid transparent;}
■上向きに▲がでてるフキダシ
.fukidashi{width:220px;background:#FFFFFF;padding:15px;position:relative;}.fukidashi:after{content:'';position: absolute;top:-10px;left:50%;margin:0 0 0 -5px;width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #FFFFFF;border-left:10px solid transparent;}
■右向きに▶が出ているフキダシ
.fukidashi{width:220px;background:#FFFFFF;padding:15px;position:relative;}.fukidashi:after{content:'';position: absolute;top:50%;right:-10px;margin:-5px 0 0 0;width:0;height:0;border-top:10px solid transparent;border-left:10px solid #FFFFFF;border-bottom:10px solid transparent;}
色は白にしたので、変更したかったら#FFFFFFの2箇所を変えるだよ。