首页 > Web开发 > 详细

DIV+CSS制作箭头效果

时间:2014-12-04 09:57:07      阅读:333      评论:0      收藏:0      [点我收藏+]

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

DIV+CSS制作箭头效果

原文:http://www.cnblogs.com/Teresa-luo/p/4142060.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!