本文介绍了如何使用CSS创建类似书签的立体导航栏。作者在看到别人网站上的设计后，决定尝试自己动手实现。文章详细讲述了通过调整border属性生成三角形以构建书签形状，并逐步讲解了如何组合多个div以及添加动画效果，最终实现了一个动态的书签导航栏。
最近在写个网站，发现导航栏怎么写都不好看。后来在看别人的网站的时候发现了一个不错的设计，于是乎就想自己去试试如何写出同样的效果。先贴别人网站导航的效果图。
类似书签式的立体导航，瞬间就觉得这个设计真的不错。于是自己就开始思考。如何能用CSS做出同样的效果呢。首先从三角形开始思考。如何生成一个三角形来产生立体效果。于是就想到了border。代码与效果如下。
<!DOCTYPE html>
<body>
<div class="allow">
</div>
</body>
<style>
.allow{
width:1px;
background:white;
border: 15px solid;
border-color: #111111 #B2DE34 #555555 red ;
}
</style>
通过修改border-left,border-right,border-top,border-bottom可以得到不同的三角形。于是乎就开
最低0.47元/天 解锁文章
扫一扫
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
