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

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

1. レンダリング

JD効果

シミュレーション効果

2. 原則

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

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

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

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

表示に影響を与えないように、 font-sizeline-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 を応援していただければ幸いです。

<<:  HTML ul および li タグを使用して画像を表示するサンプル コード

>>:  Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握

推薦する

一般的な docker コマンドの概要 (推奨)

1. 要約:一般的に、次のカテゴリに分類できます。 Docker 環境情報 — docker [i...

Pythonの関数知識についての簡単な説明

目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...

HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント

IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...

デザイナーが再びハマーの公式サイトに不満を述べる

昨年、この公開書簡は大ヒットし、羅永浩氏を驚かせた。今日、著者が新しい章を発表するとは思ってもみなか...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

MySQL 8.0.15 で MGR シングル マスターと複数スレーブを構成する方法

1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...

CSS 兄弟要素フローティング分析の概要

float:左/右/なし; 1. 同じレベルフローティング(1)ブロックレベル要素を同じ行に表示する...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

Ubuntu 18.04 に Nvidia グラフィック カード ドライバーをインストールするチュートリアル (画像とテキスト付き)

0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...

HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...