泡の小さな鋭角効果を実現する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 を応援していただければ幸いです。