用css偽類實現提示對話方塊的小三角，哈哈！
阿新 • • 發佈：2019-02-18
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;
}
