纯css书签导航按钮

最新推荐文章于 2024-06-24 09:27:13 发布

xy_ggsddu

最新推荐文章于 2024-06-24 09:27:13 发布

阅读量4k

点赞数 1

分类专栏： css 文章标签： css导航书签书签导航书签效果立体导航

本文链接：https://blog.csdn.net/xy_ggsddu/article/details/47209561

版权

本文介绍了如何使用CSS创建类似书签的立体导航栏。作者在看到别人网站上的设计后，决定尝试自己动手实现。文章详细讲述了通过调整border属性生成三角形以构建书签形状，并逐步讲解了如何组合多个div以及添加动画效果，最终实现了一个动态的书签导航栏。

摘要由CSDN通过智能技术生成

最近在写个网站，发现导航栏怎么写都不好看。后来在看别人的网站的时候发现了一个不错的设计，于是乎就想自己去试试如何写出同样的效果。先贴别人网站导航的效果图。

类似书签式的立体导航，瞬间就觉得这个设计真的不错。于是自己就开始思考。如何能用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元/天解锁文章

xy_ggsddu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录