ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 で擬似要素を使用してバブル ボックスを実装するコード (前、後)

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

不言
不言オリジナル
2018-08-09 16:14:402603ブラウズ

この記事では、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: &#39;&#39;;            
            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. 三角形を中空にする必要がある場合、レンダリングは次のようになります。


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

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


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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。