チャットバブル効果を実現するCSS

1. レンダリング

JD効果

シミュレーション効果

2. 原則

高さと幅が0のボックスを用意します

このボックスの周囲に境界線を設定する

不要な境界線をtransparentに置き換え、表示する必要がある場所に対応する色を設定します。

サイズを変更する必要がある場合は、境界線の幅border-width widthを設定するだけです。

表示に影響を与えないように、 font-sizeとline-heightを 0 に設定します。

最後に、位置決め機能を使用して希望の位置に設定します

3. コード

HTML構造

<div class="square">
    <p class="triangle"></p>
</div>

CSS スタイル

。四角 {
  位置: 相対的;
  幅: 400ピクセル;
  高さ: 200px;
  背景: 緑;
  マージン: 150px 自動;
}
.三角形 {
	位置: 絶対;
  上: -40px;
  左: 50%;
  左マージン: -20px;
  幅: 0;
  高さ: 0;
  境界線のスタイル: solid;
  境界線の幅: 20px;
  border-color: 透明 透明 赤 透明;
  フォントサイズ: 0;
  行の高さ: 0;
}

CSS チャット バブルに関するこの記事はこれで終わりです。CSS チャット バブルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。