css 梯形标签页
2024-10-10 23:37:58
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 可以得到左侧倾斜或右侧倾斜的标签页)
最新文章
- 注解:【有连接表的】Hibernate双向1->;N关联 (N端、1端同时参与控制关联关系)
- css3放大效果
- Autorun.inf文件(2):改变硬盘分区图标
- FatMouse' Trade_贪心
- Vagrant 快速入门
- (转)内网网站发布到外网-nat123动态公网IP动态域名解析
- iOS KVO的原理
- Beaglebone Back学习二(功能测试)
- InstallShield 创建自己的Dialog
- Powerpoin怎么制作电子相册|PPT制作电子相册教程
- SQL Server 中的跨库视图
- Courses(最大匹配)
- SOM网络聚类完整示例(利用python和java)
- 微信小程序用户信息解密失败导致的内存泄漏问题。
- 【译】参考手册-React组件
- StatefulSet
- RANSAC介绍(Matlab版直线拟合+平面拟合)
- leetcode-algorithms-22 Generate Parentheses
- effective c++ 笔记 (26-29)
- Linux tomcat自动启动
热门文章
- VC中遍历进程并获取进程信息
- Maven基础教程
- 在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function
- 异步编程设计模式 - IronPythonDebugger
- C# .net Jquery ajax 简单示例
- Java compiler level does not match the version of the installed Java project facet.解决办法
- Java抽象类深入理解-----模板方法设计模式(Templete Method)
- CoreData概略
- CloudStack核心类ApiServlet、ApiServer、ApiDispatcher、GenericDaoBase源码分析
- Unity3D TouchScript 插件教程一