用css伪类实现提示对话框的小三角，哈哈！

今天实现下图提示表单提示框侧边的小三角。其实很简单，具体如下





1.首先把对话框用div或其他块级元素先画出来，进行一个相对于大容器的absolute绝对定位，调整到合适位置。

2.用伪类元素after给每个上述的块级元素添加小三角。直接上代码：（这里我用的p标签）

p:after {
content: "";
position: absolute;
left: -16px;
top: 8px;
width: 0;
height: 0;
border: 8px solid rgb(142,225,80);
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
原理：创建一个只设置边框大小，宽高都为0的盒子，然后将根据需要将边框的某三边颜色设置为透明（transparent），可创建各个方向的小三角。
注意：由于创建的伪类元素是行内元素，进行绝对定位absolute之后元素性质发生改变（由行内元素变成了块级元素）。然后根据需要调整位置，这样一个对话提示框就制作完毕啦。

扩展：
如果要实现聚焦表单时提示框才显示，可以用focus伪类实现：聚焦时显示，否则隐藏。上述表单的整个实现代码如下：

html,body {
margin: 0;
width: 100%;
height: 100%;
}
.box {
position: relative;
box-sizing: border-box;
width: 500px;
height: 500px;
padding-top: 60px;
background-color: #ccc;
text-align: right;
}
input {
width: 300px;
height: 30px;
border-radius: 3px;
border: 1px solid rgba(142,225,80,.5);
margin-left: 1em;
margin-right: 80px;
margin-top: 30px;
}
input[type="reset"] {
margin-top: 0;
}
input[type="submit"],input[type="reset"] {
background-color: rgb(142,225,80);
border-color: rgba(17,120,8,0.3);
}
p {
position: absolute;
width: 170px;
height: 30px;
border-radius: 8px;
background-color: rgb(142,225,80);
text-align: left;
line-height: 30px;
color: #fff;
display: none;
}
p.text1 {
top: 75px;
left: 420px;
}
p.pass {
top: 140px;
left: 420px;
}

p.email {
top: 204px;
left: 420px;
}
p.text2 {
top: 268px;
left: 420px;
}
p.text1:after,
p.pass:after,
p.email:after,
p.text2:after {
content: "";
position: absolute;
left: -16px;
top: 8px;
width: 0;
height: 0;
border: 8px solid rgb(142,225,80);
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
input:focus +p {
display: block;
}





html文档被解析没了，只能贴图片了。