チャットバブル効果を実現する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、メモリ) を把握

推薦する

Linux リモート コントロール Windows システム プログラム (3 つの方法)

場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...

VMware10 での CentOS 7 のインストールと設定のチュートリアル

Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

デザイン視点技術はデザイン能力の重要な資本である

ある設計士はこう尋ねた。「実際のプロジェクト制作には参加せずに、純粋に設計だけをすることはできますか...

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

Centos7 でスーパーバイザ デーモンをインストールして設定する方法

初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...

モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

MySQL スライディング集計/年初来集計の原理と使用例の分析

この記事では、例を使用して、MySQL スライディング集計/年初来集計の原理と使用方法を説明します。...

nginxワーカープロセスループの実装

ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...