ホームページ > 記事 > ウェブフロントエンド > CSS3 で擬似要素を使用してバブル ボックスを実装するコード (前、後)
この記事では、CSS3 で疑似要素を含むバブル ボックスを実装するためのコード (前、後) を紹介します。必要な方は参考にしていただければ幸いです。
バブル ボックスの原理は、実際には通常のボーダー + 三角形です。CSS 三角形の実装では、ボーダー属性も使用されます
<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; }レンダリング:
CSSセレクターの種類は何ですか? CSS でよく使用されるセレクターの簡単な紹介
以上がCSS3 で擬似要素を使用してバブル ボックスを実装するコード (前、後)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。