CSS3制作卷角菜单.docVIP

CSS3制作卷角菜单 大的亮点就是使用了CSS3制作了卷边效果，配上js的移动效果，真是与众不同。在这个demo中主要运用了border-radius制作卷边效果，使用gradient实现了导航的渐变效果，而且还使用了border绘制了向上的箭头，同时给箭头配上了一个css3的动画效果。真的不错哟。 标签： 无 001 !DOCTYPE HTML 002 html lang=en-US 003 head 004 meta charset=UTF-8 005 titleCSS3制作卷角菜单|w3cplus/title 006 meta name=keywords content=css3学习,css3属性详解,css3 transition,如何学好css3 007 meta name=description content=W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。 008 link rel=shortcut iconhref=/favicon.ico 009 link rel=stylesheet type=text/csshref=/forum-39-1.html media=all / 010 link rel=stylesheet type=text/css href=css/style.css media=all 011 style 012 ul,li{ 013 list-style-type:none; 014 padding:0; 015 } 016 .form{ 017 width:405px; 018 height:200px; 019 background:#2f2f2f; 020 position:relative; 021 overflow:hidden; 022 margin:30px auto; 023 } 024 .corner{ 025 background: -webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff); 026 background: -moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px; 027 background: -o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px; 028 background: -ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px; 029 background: linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px; 030 width: 90px; 031 height:90px; 032 border-radius: 0 0 0px 90px / 0 0 0 30px; 033 -webkit-transform: rotate(-90deg); 034 -moz-transform: rotate(-90deg); 035 -o-transform: rotate(-90deg); 036 -ms-transform: rotate(-90deg); 037 transform: rotate(-90deg); 038 posit