クリエイター：コーディング備忘録ブログ

RSS

コーディング

CSSだけで吹き出しを作る

2018.06.27

cssで吹き出しを作成すれば、テキスト量がどんなに増えてもレイアウトが崩れにくいという、メリットがあります。

要素にくっつけて別の形を表現することで吹き出しの作成がが可能です。

その場合三角形を:beforeや:afterといった擬似要素として配置します。

<div class="fukidashi"></div>

/*基本の吹き出し*/
.fukidashi{
  position: relative;
  background: #FFF;
  padding: 2em;
}
.fukidashi:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<div class="fukidashi"></div>

/*基本の吹き出し*/

.fukidashi{

position: relative;

background: #FFF;

padding: 2em;

}

.fukidashi:after{

content: "";

position: absolute;

right: 0;

bottom: -20px;

left: 0;

width: 0px;

height: 0px;

margin: auto;

border-style: solid;

border-color: #ccc transparent transparent transparent;

border-width: 20px 20px 0 20px;

}

この記事を見た人は次の記事も見ています。

viewportの指定

前の記事

wordpress カスタム投稿のリストを連番で拾得

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

テキストに関するcss

2017.07.04

コーディング

カスタム投稿タイプのパーマリンクを数字ベースに

2018.06.18

コーディング

第四十回「ホームページに自動音楽再生コードを埋め込む」

2016.06.20

コーディング

Photoshop消しゴムツール

2021.08.20

コーディング

WPで特定の拡張子のファイルをアップロード可能にする

2017.11.01

コーディング

第二十五回「ページ内リンクをスクロールで移動」

2016.05.13