泡の小さな鋭角効果を実現する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 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

JS クロスドメイン XML - AS URLLoader を使用

最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、X...

Tomcat が IDEA のコンソールで文字化けを起こし、IDEA エンコーディングを UTF-8 に設定する方法

1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...

MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)

最悪の選択肢は、結果を時間順に並べ替えて最初のものを取ることです。 *から選択 ここで、create...

練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する

予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

初心者向けMySQLシリーズチュートリアル

目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

Windows での MySQL の詳細なインストール手順と基本的な使用方法

目次1. MySQLをダウンロードする2. MySQLをインストールする3. MySQL の基本的な...

iviewは動的なフォームとカスタム検証期間の重複を実装します

フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...