纯css三角提示框，兼容IE8

 .messageBox{ ??????????position: relative; ??????????width: 240px; ??????????height: 60px; ??????????line-height: 60px; ??????????background: #e9fbe4; ??????????border: 1px solid #c9e9c0; ??????????border-radius: 4px; ??????????text-align: center; ??????????color: #0c7823; ??????} ???????.triangleBorder{ ???????????position: absolute; ???????????left: 30px; ???????????overflow: hidden; ???????????width: 0; ???????????height: 0;border-width: 10px;border-style: solid dashed dashed dashed; ???????} ???????.tbBorder{ ???????????bottom: -20px; ???????????border-color: #c9e9c0 transparent transparent transparent; ???????} ???????.tbBackground{ ???????????bottom: -19px;border-color: #e9fbe4 transparent transparent transparent; ???????}

<div class="messageBox"> ???<span>我是利用border属性实现的</span> ???<div class="triangleBorder tbBorder"></div> ???<div class="triangleBorder tbBackground"></div></div>

.messageBox{ ??????????position: relative; ??????????width: 240px; ??????????height: 60px; ??????????line-height: 60px; ??????????background: #e9fbe4; ??????????box-shadow: 1px 2px 3px #e9f4e4; ??????????border: 1px solid #c9e9c0; ??????????border-radius: 4px; ??????????text-align: center; ??????????color: #0c7823; ??????} ???????.triangleBorder{ ???????????position: absolute; ???????????left: 30px; ???????????overflow: hidden; ???????????width: 26px; ???????????height: 26px; ???????????font: normal 26px "SimSun"; ???????} ???????.tbBorder{ ???????????bottom: -12px; ???????????color: #c9e9c0; ???????} ???????.tbBackground{ ???????????bottom: -11px;color: #e9fbe4; ???????}

<div class="messageBox"> ???<span>我是利用?字符实现的</span> ???<div class="triangleBorder tbBorder">?</div> ???<div class="triangleBorder tbBackground">?</div></div>

.triangle { ???????????position: relative; ???????????width: 100px; ???????????height: 50px; ???????????border: 2px solid #4ed621; ???????????border-radius: 5px; ???????} ???????.triangle:before { ???????????position: absolute; ???????????content: ""; ???????????top: -10px; ???????????left: 25px; ???????????border-left: 10px solid transparent; ???????????border-right: 10px solid transparent; ???????????border-bottom: 10px solid #4ed621; ???????} ???????/* 白色覆盖*/ ???????.triangle:after { ???????????position: absolute; ???????????content: ""; ???????????/*减少两像素*/ ???????????top: -8px; ???????????left: 25px; ???????????border-left: 10px solid transparent; ???????????border-right: 10px solid transparent; ???????????border-bottom: 10px solid #fff; ???????}

<div class="triangle"></div>

 .box{ ???????????position: relative; ???????????padding-top: 8px; ???????} ???????.con{ ???????????width: 200px; ???????????height: 100px; ???????????border: 1px skyblue solid; ???????????border-radius: 3px; ???????????background-color: skyblue; ???????} ???????.con-ret { ???????????border: 7px solid transparent; ???????????border-bottom-color: skyblue; ???????????position: absolute; ???????????left: 10px; ???????????top: -6px; ???????}

<div class="box"> ???<div class="con-ret"></div> ???<div class="con"></div></div>

.main{ ???????????width: 120px; ???????????padding: 10px; ???????????font-size: 14px; ???????????color: #333; ???????????line-height: 28px; ???????????background: #F0981C; ???????????border: 2px solid #FF0000; ???????????position: relative; ???????????-webkit-border-radius:5px; ???????????-moz-border-radius:5px; ???????????border-radius: 5px; ???????????display: inline-block; ???????} ???????????????.main:before,.main:after{ ???????????content: ‘ ‘; ???????????border-top: 12px solid #FF0000; ???????????border-left: 12px solid transparent; ???????????border-right: 12px solid transparent; ???????????position: absolute; ???????????bottom: -12px; ???????????left: 20px; ???????} ???????.main:after{ ???????????border-top: 12px solid #F0981C; ???????????bottom: -9px; ???????}

<div class="main"> ???<p>这是内容这是内容这是内容</p></div>