10.(高级)CSS形状之:梯形标签
来源:互联网 发布:编程难学吗 编辑:程序博客网 时间:2024/05/02 15:50
一、等腰梯形
方法:
#o{
width: 100px;
height: 25px;
padding: .5em 1em .35em;
position: relative;
color: #fff;
}
#o::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(3deg);
/*设置成底部固定旋转*/
transform-origin: bottom;
/*底部固定旋转后,导致文字偏上*/
/*通过放大scale()解决此问题*/
transform: perspective(.5em) rotateX(3deg) scale(1.3);
}
二、直角梯形
方法:
transform-origin: bottom left;(左直角)
transform-origin: bottom right;(右直角)
声明:以上方法参考《CSS揭秘》
0 0
- 10.(高级)CSS形状之:梯形标签
- 7.(高级)CSS形状之:平行四边形
- 6.(高级)CSS形状之:自适应椭圆
- 8.(高级)CSS形状之:菱形图片
- 9.(高级)CSS形状之:切角效果
- css实现梯形标签页
- css实现梯形
- 利用CSS画梯形
- CSS Border高级使用实例分享(三角等形状)
- CSS中cursor属性给标签加上小手形状
- CSS中cursor属性给标签加上小手形状
- 纯css画三角形/梯形(兼容ie6)
- css画项目里常用的多边形(三角形、梯形)
- CS秘密花园:梯形标签
- 关于新建CSS 中的 类 标签 高级
- CSS之标签选择器
- HTML高级标签之表格标签
- 项目实战之玩转div+css制作自定义形状
- Spring--初级
- Jedis常用命令
- 在oracle中where 子句和having子句中的区别
- select默认选中后更改选项
- __cpuidex读取CPU序列号
- 10.(高级)CSS形状之:梯形标签
- SpringMVC常用注解
- Android学习路线指南
- sq必会知识
- WebRTC学习之ICE深入理解
- Android多媒体(视频播放器-拍照-录像)
- QT学习笔记
- Android的okhttp的post请求,php返回json数据。以及遇到的okhttp dispatcher问题,和json解析遇到的问题
- 数据结构(七)栈