泡の小さな鋭角効果を実現するCSS

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます):

{ }

参考リンク Pure CSS バブル効果

必要な知識ポイント:

div の幅と高さが両方とも 0 の場合、境界線全体は、各辺に 1 つずつ、合計 4 つの三角形で構成されます。これを使用して、次のような小さな鋭角を作成できます。

不要な 3 つの境界線の色を背景と同じに設定して、必要な小さな尖った角を取得し、配置を使用して位置を調整します。

上記の方法では、色付きの小さな尖った角が得られますが、効果は境界線付きの小さな金色の角が表示されることです。したがって、既存のものに基づいて 2 つの小さな鋭い角が表示され、z-index 属性を使用してそれらが重ね合わされて表示されます。 2 つ必要なので、非セマンティック要素が表示されないように疑似要素を使用できます。コードは次のとおりです。

&::前に {
    コンテンツ: "";
    表示: ブロック;
    幅: 0;
    高さ: 0;
    境界線: 実線 10px;
    境界線の色: #E9E9E9 rgba(255, 255, 255, 0)
          255 ビットのピクセルを 255 ビットのピクセルに変換します。
    位置: 絶対;
    上: 208px;
    左: 40px;
    zインデックス: 2;
}

&::後 {
    コンテンツ: "";
    表示: ブロック;
    幅: 0;
    高さ: 0;
    境界線: 実線 8px;
    境界線の色: #fff rgba(255, 255, 255, 0) 
        255 ビットのピクセルを 255 ビットのピクセルに変換します。
    位置: 絶対;
    上: 207px;
    左: 41.5px;
    zインデックス: 3;
}

要約する

CSS でバブルの小さな尖った角の効果を実現する方法についての記事はこれで終わりです。CSS バブルの小さな尖った角の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL シリーズ 12 バックアップとリカバリ

>>:  Dockerコンテナのいくつかの保存方法の詳細な説明

推薦する

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

html ページ!--[IE の場合]...![endif]--使用方法の詳細な紹介

コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...

MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

mysqlは2つ以上のフィールドがNULLであるレコードを見つける問題を解決します

コアコード /*-------------------------------- 2つ以上のフィール...

MySQLの自己接続と結合の詳細な理解

1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

LinuxにPython 3.6をインストールして落とし穴を避ける

Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...

JSメモリ空間の詳細な説明

目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...

MySQL の group by に関する簡単な説明

目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....

MySQL インデックス最適化の説明

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

nginx.conf のルートディレクトリ設定の詳細な説明

nginx.conf を構成するときには常に何らかの問題が発生します。ここでは、よくある問題とその解...

Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法

目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...

MySQLのFreeListメカニズムの詳細な説明

1. はじめにMySQL が起動すると、BufferPool が初期化されます。クエリ操作を実行する...

Node.jsミドルウェアの仕組みの詳細な説明

目次Express ミドルウェアとは何ですか? Expressミドルウェアを作成するための要件Exp...

TypeScriptジェネリックの使用

目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...