<!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>