DIV+CSS制作箭头效果

<style> 
.b_main{position:absolute} 
.out{ 
position:absolute; 
top:7px; 
border-color:transparent #999999 transparent transparent; 
border-style:dashed dashed solid dashed; 
border-width:8px; 

.in{ 
position:absolute; 
border-color:transparent #ffffff transparent transparent; 
border-style:dashed dashed solid dashed; 
border-width:8px; 
top:-8px; 
left:-6px; 

.border{ 
position:relative; 
border:1px solid #999999; 
padding:10px; 
left:16px; 
border-radius:5px; 

</style> 
</head> 
<body> 
<div class="b_main"> 
<div class="border">效果实现^_^</div> 
<div class="out"> 
<div class="in"></div> 
</div> 
</div> 
</body> 

http://www.jb51.net/css/143000.html

http://www.oschina.net/code/snippet_125027_3637
http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

posted @ 2014-12-04 09:35  Teresa.luo  阅读(585)  评论(0编辑  收藏  举报