CSSでダイアログボックスを実装する方法

CSS でダイアログ ボックスを実装する方法: 最初に HTML サンプル ファイルを作成し、次に親要素を相対的に配置し、次に CSS 疑似クラスを前後に使用して三角形を記述し、最後にダイアログ ボックスを実装します。 CSS スタイルを設定することで。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

小さな三角形のダイアログ ボックスを使用した純粋な CSS の記述

実際のスタイルでは、ダイアログ ボックスに似たスタイルを記述することがよくあります。このスタイルは、 a 小さな三角形は次のとおりです:

サンプル画像

それでは、CSS でどのように記述するかというと、実際は非常に簡単です。親要素の相対位置を指定し、前後に CSS 疑似クラスを使用します。三角形を書くこともできますが、枠線付きの三角形が必要な場合は、2 つ重ねることができます。コードは次のとおりです:

<p>
    纯css写带小三角对话框
</p>

.box2{  
    float:left;  
    position:relative;  
    width:200px;  
    height:100px;  
    border:1px solid #00f;  
    margin:50px;  
    box-sizing:border-box;  
    font-size:14px;  
    padding:10px;  
    box-shadow:0 0 2px rgba(0,0,0,.5)  
}  
.box2:before,
.box2:after{  
    position:absolute;  
    content:'';
    border:10px solid;
}  
.box2:before{  
    right: -20px;
    top:20px;
    border-color: transparent transparent transparent #00f;
}  
.box2:after{  
    border-color: transparent transparent transparent #fff;
    right: -18px;
    top: 20px;
}

推奨学習: css ビデオ チュートリアル

以上がCSSでダイアログボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。