css实现梯形
2024-10-15 08:10:13
- 使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border
- 使用3d旋转矩形,使之看起来像矩形
<html>
<head>
<meta charset="utf-8">
<style>
.trapezoid-0{
border-bottom: 100px solid #fb3;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
margin: 0 0 20px 0;
}
.trapezoid-1{
border-radius: .5em .5em 0 0;
margin: 20px;
height: 40px;
width: 100px;
background: #fb3;
transform-origin: bottom;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
/*scaleY: 纵轴放大1.3倍,使梯形高度等于height;perspective:3d透视效果,元素距离视图的距离*/
}
</style>
</head>
<body>
<div class="trapezoid-0"></div>
<div class="trapezoid-1"></div>
</body>
</html>
最新文章
- Html5文件
- 无法Ping通windows 7主机
- SharedObject使用:在FluorineFx.net与Flex中使用共享对象维护在线用户列表实例【转】
- ACM - ICPC World Finals 2013 C Surely You Congest
- ASP.NET MVC3细嚼慢咽---(2)模板页
- vs 点击就设置项目为默认启动项
- R语言学习笔记(数据预处理)
- iOS网络开发-打造自己的视频客户端
- [译]ava 设计模式之职责链
- maven(二) maven项目构建ssh工程(父工程与子模块的拆分与聚合)
- Extjs 在Grid单元中格添加Tooltip提示
- eclipse启动tomcat正常,但是debug启动报错FATAL ERROR in native method:JDWP No transports initialized,jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197) ERROR: transport error 202: connect failed:Connection timed out
- CentOS5.5 - lnmp环境安装与使用
- 在Linux终端安装Julia
- 前端之html概述及基本结构
- Java读取文件时第一行出现乱码“?”问号
- [转]c++优先队列(priority_queue)用法详解
- BFS-迷宫问题-用宽度(广度)优先搜索解决最优路径问题
- kill prefix extra,endo out 1
- 【转】每天一个linux命令(18):locate 命令