How to implement dialog box in css

How to implement a dialog box in css: first create an HTML sample file; then position the parent element relatively; then use the CSS pseudo-class before or after to write a triangle; and finally implement the dialog box by setting the css style. .

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Pure css writing with a small triangle dialog box

In actual styles, it is often encountered to write a style similar to a dialog box, and this style often has a The small triangle is as follows:

Example picture

So how to write it in css? It’s actually very simple. First make the parent element relative Position, and then use the CSS pseudo-class before or after. You can write a triangle. If you want a triangle with a border, you can overlap two. The code is as follows:

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

Recommended learning: css video tutorial

The above is the detailed content of How to implement dialog box in css. For more information, please follow other related articles on the PHP Chinese website!