小三角1

向左的小三角提示框：

　　<div class="SD-tipbox">

  <div class="cntBox"><p><a href="#">共4234条</a></p></div>
  <div class="SD-tipbox-direction SD-tipbox-left"><em>◆</em><span>◆</span></div>
  </div>

 

四个方向的小三角提示框:

<div class="SD-tipbox">
		<div class="cntBox">
			<p>
				<a href="#">Tip中小三角的实现!</a>
			</p>
		</div>
		<div class="SD-tipbox-direction SD-tipbox-up">
			<em>◆</em><span>◆</span>
		</div>
		<div class="SD-tipbox-direction SD-tipbox-down">
			<em>◆</em><span>◆</span>
		</div>
		<div class="SD-tipbox-direction SD-tipbox-left">
			<em>◆</em><span>◆</span>
		</div>
		<div class="SD-tipbox-direction SD-tipbox-right">
			<em>◆</em><span>◆</span>
		</div>
		<a title="关闭" onclick="return false" class="close-ico" href="#">关闭</a>
	</div>

 css代码：

em{font-weight:normal;font-style:normal;}

.SD-tipbox{ background-color: #FFFFE9; border: 1px solid #FFDE8E; padding: 5px 25px 5px 10px; margin:10px; position: absolute; z-index: 100; font-size:12px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
.SD-tipbox .close-ico,.SD-notice-tip  .close-ico  { position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(http://css.sodao.com/home/img/close-ico.png); text-indent:-900px; overflow:hidden; }
.SD-tipbox .close-ico:hover,.SD-notice-tip .close-ico:hover { background-position:0 -16px; }
.SD-tipbox p{ line-height:1.5;padding:0;margin:0; }
.SD-tipbox .SD-tipbox-direction{position: absolute; }
.SD-tipbox .SD-tipbox-direction em,.SD-tipbox .SD-tipbox-direction span{ height: 19px; width: 17px; font-family: Simsun; font-size: 16px;line-height: 21px; overflow: hidden;position: absolute;}
.SD-tipbox .SD-tipbox-direction em{color: #FFDE8E; }
.SD-tipbox .SD-tipbox-direction span{color: #FFFFE9; }
.SD-tipbox .SD-tipbox-up{left: 50%; margin-left:-8px; top:-10px;*top:-11px; _top:-10px;}
.SD-tipbox .SD-tipbox-up span{ top:1px}
.SD-tipbox .SD-tipbox-down{left: 50%; margin-left:-8px; bottom:9px; }
.SD-tipbox .SD-tipbox-down span{ top:-1px}
.SD-tipbox .SD-tipbox-right{top: 50%; margin-top:-8px; right:7px; }
.SD-tipbox .SD-tipbox-right span{ left:-1px}
.SD-tipbox .SD-tipbox-left{top: 50%; margin-top:-8px; left:-8px; }
.SD-tipbox .SD-tipbox-left span{ left:1px}

.SD-notice-tip { width:200px; margin:0px;}
.SD-notice-tip  p{ line-height:22px }