<!DOCTYPE html><html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>after 和 before 制作提示框（2013.08.08）</title>
</head><style>
html,
body,
div {
padding: 0px;
margin: 0px;
}
.ts,
.ts_right,
.ts_bottom,
.ts_left {
border: 4px solid #CCC;
position: relative;
/* 相对位置，目地是{使 after 和 bofore 绝对位置原点位置处于 ts 盒子}*/
margin: 50px;
background: #09f;
line-height: 50px;
padding: 0px 20px 0px 20px;
font-size: 20px;
font-weight: 900;
display: inline-block;
color: #FFF;
font-family: “ 幼圆 ”;
}
.ts:after,
.ts:before,
.ts_right:after,
.ts_right:before,
.ts_bottom:after,
.ts_bottom:before,
.ts_left:after,
.ts_left:before {
position: absolute;
/* 相对于 ts 盒子定位 */
border: 10px solid transparent;
content: ” “;
}
/* 上 */
.ts:after,
.ts:before {
left: 50%;
bottom: 100%;
}
.ts:after {
border-bottom-color: #09f;
border-width: 10px;
margin-left: -10px;
}
.ts:before {
border-bottom-color: #ccc;
border-width: 16px;
margin-left: -16px;
}
/* 右 */
.ts_right:after,
.ts_right:before {
left: 100%;
top: 50%;
}
.ts_right:after {
border-left-color: #09f;
border-width: 10px;
margin-top: -10px;
}
.ts_right:before {
border-left-color: #ccc;
border-width: 16px;
margin-top: -16px;
}
/* 下 */
.ts_bottom:after,
.ts_bottom:before {
left: 50%;
top: 100%;
}
.ts_bottom:after {
border-top-color: #09f;
border-width: 10px;
margin-left: -10px;
}
.ts_bottom:before {
border-top-color: #ccc;
border-width: 16px;
margin-left: -16px;
}
/* 左 */
.ts_left:after,
.ts_left:before {
right: 100%;
top: 50%;
}
.ts_left:after {
border-right-color: #09f;
border-width: 10px;
margin-top: -10px;
}
.ts_left:before {
border-right-color: #ccc;
border-width: 16px;
margin-top: -16px;
}
</style>
<body>
<div class=”ts”> 提示框 </div>
<div class=”ts_right”> 提示框 (右) 还是自适应的！
<p> 来了 </p>
</div>
<div class=”ts_bottom”> 提示框（下）</div>
<div class=”ts_left”> 提示框（左）</div>
</body>
</html>