您当前所在位置：首页 > 网页制作 > CSS

CSS

CSS利用伪元素实现导航栏斜线分隔

网络五木十架2016-03-14CSS4925

这篇文章主要介绍了CSS利用伪元素实现导航栏斜线分隔的相关资料

先看看效果：

开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现

先写html结构。

XML/HTML Code复制内容到剪贴板

<div class="header_right fr">
<a href="#" class="link">Home</a>
<a href="#" class="link">About</a>
<a href="#" class="link">Features</a>
<a href="#" class="link">Blog</a>
<a href="#" class="link">Shop</a>
<div class="alarm fr">
<img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
</div>
</div>