视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS制作三角形和按钮
2020-11-27 15:39:22 责编:小采
文档

CSS制作三角形和按钮

用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮。

我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说:

网易首页的头部菜单栏中,也会有这样的三角形

当鼠标经过时,三角形会垂直翻转,如下

现在我分享制作三角形的做法,主要是利用边框做成的

首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形

源代码:



 
 正方形
 


 

效果如下:

现在,要把其中一个三角形取出来,其实就是要把其他的隐藏掉

源代码:



 
 制作三角形箭头
 


 

效果如下:

接下来,我分享一种按钮的做法

主要是利用边框样式、盒子阴影和伪类效果来实现的

源代码:



 
 CSS制作按钮
 


 

效果:

开始

效果可能不太美观,有待提升,大家可以发挥自己的想象做出更好的效果,祝大家学习愉快!

下载本文
显示全文
专题