CSS仿网易首页的头部菜单栏按钮和三角形制作方法
|
当鼠标经过时，三角形会垂直翻转，如下 现在我分享制作三角形的做法，主要是利用边框做成的 首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形 源代码：
CSS Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正方形</title> <style> .div{ width: 0px; height: 0px; border-top:50px solid red; border-bottom:50px solid green; border-left:50px solid yellow; border-right:50px solid blue; /*注意：四条边框的宽度必须相同！*/ } </style> </head> <body> <div class="div"></div> </body> </html> 效果如下：
现在，要把其中一个三角形取出来，其实就是要把其他的隐藏掉 源代码：
CSS Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作三角形箭头</title> <style> .arrow{ width:0; height:0; border-top:50px solid #000; /*设置并显示上边框*/ border-bottom:none; /*不设置下边框*/ border-left:50px solid transparent; /*设置但隐藏左边框*/ border-right:50px solid transparent; /*设置但隐藏右边框*/ } .arrow:hover{ （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
