码迷,mamicode.com
首页 > Web开发 > 详细

DIV+CSS制作箭头效果

时间:2014-12-04 10:00:04      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   on   

<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制作箭头效果

标签:style   blog   http   io   ar   color   os   sp   on   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!