最新消息:博客断断续续关停过,感谢保留友链的友们,以后本博客可能会比较少更新,但是会一直开下去,并保持稳定性。

通过CSS伪类实现的边线箭头

前端开发 东子 2253次浏览 2 条评论 无图浏览

具体不用解释了吧,看代码就知道用afterbefore伪类实现的…

通过CSS伪类实现的边线箭头

CSS样式:

<style>
body{ background: #f1f1f1; }
.dm { margin-top: 10px; width: 100px; height: 100px; float: left; margin-right: 20px; background-color: #fff; position: relative; border: 1px solid #aaa;border-radius: 4px; }
#demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; }
#demo:after { border-width: 10px; border-left-color: #FFF; top: 15px; }
#demo:before { border-width: 11px; border-left-color: #888; top: 14px; }
/* */
#demo2:after, #demo2:before { border: solid transparent; content: ' '; position: absolute; width: 0px;}
#demo2:after { border-width: 10px; border-bottom-color: #FFF; top: -20px; left: 10px; }
#demo2:before { border-width: 11px; border-bottom-color: #888; top: -22px; left: 9px; }
/* */
#demo3:after, #demo3:before { border: solid transparent; content: ' '; position: absolute; width: 0px; }
#demo3:after { border-width: 10px; border-right-color: #FFF; top: 15px; left: -20px; }
#demo3:before { border-width: 11px; border-right-color: #888; top: 14px; left: -22px; }
/* */
#demo4:after, #demo4:before { border: solid transparent; content: ' '; position: absolute; width: 0px;  }
#demo4:after { border-width: 10px; border-top-color: #FFF; top: 100%; left: 10px; }
#demo4:before { border-width: 11px; border-top-color: #888; top: 100%; left: 9px; }
/* */
</style>

HTML代码:

<div id="demo" class="dm"></div>
<div id="demo2" class="dm"></div>
<div id="demo3" class="dm"></div>
<div id="demo4" class="dm"></div>

查看演示

声明:欢迎转载,转载请注明来源:东子博客。  本文地址链接:http://blog.kilvn.com/css-pseudo-class-arrow/

发表我的评论
取消评论
表情 每日打卡 贴图 链接 私密消息

Hi,您需要填写昵称和邮箱!

  • 昵称
  • 邮箱
  • 网址

网友最新评论 (2)

  1. 王海达博客2014-08-11 10:40 😳回复