对话箭头
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>箭头</title>
<style type="text/css">
.pr {
position: relative;
}
.reply-content {
background-color: #fcfcfc;
border: 1px solid #fcfcfc;
border-radius: 4px;
box-shadow: 0 0 5px #ccc;
padding: 0.6em;
50%;
margin: 0px auto;
}
.arrow {
border-color: transparent #fff transparent transparent;
border-style: dashed solid dashed dashed;
border- 6px;
display: block;
font-size: 0;
height: 0;
left: -12px;
line-height: 0;
position: absolute;
top: 8px;
0;
z-index: 999;
}
/*箭头向上*/
.arrow-up {
0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #f00;
}
/*箭头向右*/
.arrow-right {
0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
/*箭头向下*/
.arrow-down {
0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #ccc;
}
/*箭头向左*/
.arrow-left {
0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid #00f;
}
</style>
</head>
<body>
<div class="reply-content pr">
<span class="arrow"></span> 喵了个咪日了狗了
</div>
</body>