html编写气泡对话框,纯css写出小三角和气泡对话框

各种小三角实现：在线查看

Document

.common-div{

width: 0;

height: 0;

margin: 20px;

}

.div1{

border-top: 25px solid blue;

border-left: 25px solid red;

border-right: 25px solid yellow;

border-bottom: 25px solid green;

}

.div2{

border-top: 25px solid blue;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 25px solid transparent;

}

.div3{

border-top: 25px solid transparent;

border-left: 25px solid red;

border-right: 25px solid transparent;

border-bottom: 25px solid transparent;

}

.div4{

border-top: 25px solid transparent;

border-left: 25px solid transparent;

border-right: 25px solid yellow;

border-bottom: 25px solid transparent;

}

.div5{

border-top: 25px solid transparent;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 25px solid green;

}

.div6{

border-top: 25px solid transparent;

border-left: 25px solid red;

border-right: 25px solid transparent;

border-bottom: 25px solid red;

}

.div7{

border-top: 25px solid transparent;

border-left: 25px solid transparent;

border-right: 25px solid green;

border-bottom: 25px solid green;

}

?

?气泡对话框：在线查看

css3对话框

.dialog-box {

width: 200px;

height: 100px;

border: 1px solid #ccc;

position: relative;

margin-top: 30px;

background-color: #fff;

}

.dialog-box-1 .triangle {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #ccc;

border-left: 10px solid transparent;

position: absolute;

top: -20px;

left: 10px;

}

.dialog-box-2 .triangle {

width: 0;

height: 0;

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid transparent;

border-left: 10px solid transparent;

position: absolute;

top: -1px;

right: -1px;

}

.dialog-box-3 .triangle {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #ccc;

border-left: 10px solid transparent;

position: absolute;

top: -20px;

left: 10px;

}

.dialog-box-3 .triangle:after {

content: "";

border-top: 8px solid transparent;

border-right: 8px solid transparent;

border-bottom: 8px solid #fff;

border-left: 8px solid transparent;

position: absolute;

top: -6px;

left: -8px;

}