Bagaimana untuk melaksanakan kotak dialog dalam css

Cara melaksanakan kotak dialog dengan css: mula-mula buat fail sampel HTML kemudian letakkan elemen induk secara relatifnya, kemudian gunakan kelas pseudo css sebelum atau selepas untuk menulis kotak dialog; dengan menetapkan gaya css .

Persekitaran pengendalian artikel ini: sistem Windows 7, versi HTML5&&CSS3, komputer Dell G3.

CSS tulen untuk menulis kotak dialog segitiga kecil

Dalam gaya sebenar, ia sering ditemui untuk menulis gaya yang serupa dengan kotak dialog, dan gaya ini selalunya mempunyai Segitiga kecil, seperti yang ditunjukkan di bawah:

Imej contoh

Jadi bagaimana untuk menulisnya dalam css sebenarnya sangat mudah Kedudukan relatif elemen induk, dan kemudian gunakan kelas pseudo CSS sebelum atau selepas. Anda boleh menulis segitiga Jika anda mahukan segi tiga dengan sempadan, anda boleh bertindih dua. Kodnya adalah seperti berikut:

<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;
}

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak dialog dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!