CSS3 で擬似要素を使用してバブル ボックスを実装するコード (前、後)

この記事では、CSS3 で疑似要素を含むバブル ボックスを実装するためのコード (前、後) を紹介します。必要な方は参考にしていただければ幸いです。

バブル ボックスの原理は、実際には通常のボーダー + 三角形です。CSS 三角形の実装では、ボーダー属性も使用されます

html コード:

<div class="wrap"></div>

css コード:

.wrap{
            position: relative;            
            width: 600px;            
            height: 400px;            
            border: 10px solid #3377aa;            
            border-radius: 20px;        
    }
.wrap::before{
            position: absolute;            
            content: '';            
            width: 0;            
            height: 0;            
            border-width: 40px 20px;  
            /*上下、左右的border值*/
            border-style: solid;            
            border-color: #3377aa transparent transparent;
            /*只设置上面border的颜色，左右和下面都设置为透明，会出现一个倒三角*/
            bottom: -80px; 
            /*以下给三角形定位，使其处于底部居中处*/
            left: 50%;            
            margin-left: -20px; 
        }

レンダリング:

2. 三角形を中空にする必要がある場合、レンダリングは次のようになります。

CSS コードは次のとおりです。上の枠線の色は外箱と同様に白に設定していますが、見やすくするために本体の色を#cccに設定しています。クラスとは何ですか?そしてその機能は何ですか?

CSSセレクターの種類は何ですか? CSS でよく使用されるセレクターの簡単な紹介

以上がCSS3 で擬似要素を使用してバブル ボックスを実装するコード (前、後)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。