効果画像(境界線の色が薄すぎるので、{} で囲みます): { } 参考リンク 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 を応援していただければ幸いです。 |
>>: Dockerコンテナのいくつかの保存方法の詳細な説明
MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...
コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
コアコード /*-------------------------------- 2つ以上のフィール...
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...
Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...
nginx.conf を構成するときには常に何らかの問題が発生します。ここでは、よくある問題とその解...
目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...
1. はじめにMySQL が起動すると、BufferPool が初期化されます。クエリ操作を実行する...
目次Express ミドルウェアとは何ですか? Expressミドルウェアを作成するための要件Exp...
目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...