html 代码 略

css :

nav > a{
position: relative;
display: inline_block;
padding: .3em 1em 0;
} nav > a ::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom:0;
left: 0;
z-index: -1;
background; #ccc;
background-image;linear-gradint(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0), );
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5) rotate(5deg);
transform-origin: bottom;
}

效果图如下:

(只需改变 transform-origin 可以得到单侧面的梯形:设置为 bottom left 或 bottom right 可以得到左侧倾斜或右侧倾斜的标签页)

最新文章

  1. 注解:【有连接表的】Hibernate双向1->N关联 (N端、1端同时参与控制关联关系)
  2. css3放大效果
  3. Autorun.inf文件(2):改变硬盘分区图标
  4. FatMouse' Trade_贪心
  5. Vagrant 快速入门
  6. (转)内网网站发布到外网-nat123动态公网IP动态域名解析
  7. iOS KVO的原理
  8. Beaglebone Back学习二(功能测试)
  9. InstallShield 创建自己的Dialog
  10. Powerpoin怎么制作电子相册|PPT制作电子相册教程
  11. SQL Server 中的跨库视图
  12. Courses(最大匹配)
  13. SOM网络聚类完整示例(利用python和java)
  14. 微信小程序用户信息解密失败导致的内存泄漏问题。
  15. 【译】参考手册-React组件
  16. StatefulSet
  17. RANSAC介绍(Matlab版直线拟合+平面拟合)
  18. leetcode-algorithms-22 Generate Parentheses
  19. effective c++ 笔记 (26-29)
  20. Linux tomcat自动启动

热门文章

  1. VC中遍历进程并获取进程信息
  2. Maven基础教程
  3. 在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function
  4. 异步编程设计模式 - IronPythonDebugger
  5. C# .net Jquery ajax 简单示例
  6. Java compiler level does not match the version of the installed Java project facet.解决办法
  7. Java抽象类深入理解-----模板方法设计模式(Templete Method)
  8. CoreData概略
  9. CloudStack核心类ApiServlet、ApiServer、ApiDispatcher、GenericDaoBase源码分析
  10. Unity3D TouchScript 插件教程一