• 使用伪元素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>

css实现梯形的更多相关文章

  1. 各种demo：css实现三角形，css大小梯形，svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  2. css实现梯形标签页

    html <nav>click me</nav> css nav{ position: relative; display: inline-block; padding: 15 ...

  3. 前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  4. Html+Css实现梯形选项卡

    1,先看一下效果图 2,梯形通过定位和设置Border来实现的,平行四边形通过旋转来实现的. 3,代码如下 (1)HTML代码 <html lang="en" xmlns=& ...

  5. css 简单梯形

    通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em)  rota ...

  6. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

  7. css实现梯形（各种形状）的网页布局——transform的妙用

    在各式各样的网页中,经常会看到形状特别的布局,比如说下面的这种排版方式: 这种视觉上的效果,体验十分好.那么他是如何来实现的呢,博主在这里整理了如下2种实现的方式. 1.通过给 div 加border ...

  8. 用CSS实现梯形图标

    遇到需要实现如下图标 由图形分析,梯形,平行四边形等都可以由矩形变形而来. 而想要实现梯形,需要进行3D变换,需要使用css3的 perspective属性. 属性 perspective指定了观察者 ...

  9. css实现梯形样式(含有border)

    类似本文热门评论 效果 .hot-comment-title{ float:right; position:absolute; right: -8px; top: -30px; padding: 0; ...

随机推荐

  1. Sass进阶之路,之二(进阶篇)

    Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2 ...

  2. 常用工具说明--jsdoc 前端文档输出工具

    1.利用npm安装jsdoc模块 npm install jsdoc -g   2.由于jsdoc默认的生成文档模板不好看,可以下载一套好看些的模板,如 jaguar.js 下载地址:https:// ...

  3. linux中echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...

  4. JSP基础知识点

    JSP(Java Server Page)是主要有Sun公司倡导的一种动态网页技术,利用JSP可以构建跨平台的动态网站 应用,JSP在服务器端带JSP容器的Web服务器中运行.JSP以Java语言为基 ...

  5. 云服务器部署mongodb

    我喜欢用简单的方法 步骤 下载 解压并运行 远程连接测试 下载 到官方下载页获取下载地址,如图 在云服务器上,使用命令curl 你的地址 -o mongodb.tgz ,下载到当前目录,转到下一步. ...

  6. Mysql-安装指南

    1.设置用户名密码 首次登录后修改密码如下: 如果密码设置太过简单会报以下错误 mysql修改密码Your password does not satisfy the current policy r ...

  7. set集合去重机制

  8. Implementation：Sunday 字符串匹配

    int sunday(string str, string pattern) { int str_len = str.length(); int pat_len = pattern.length(); ...

  9. 【 js 片段 】如何组织表单的默认提交？【亲测有效】

    最近做的一个项目,我分到的部分有表单验证.点击了提交按钮,但我并不想让他跳转页面去提交.于是经过各种百度,各种 stackoverflow,各种抱大神腿之后,有了以下解决办法: 重点就是阻止 form ...

  10. Angular 框架介绍

    库和框架的区别 jQuery:库 库一般都是封装了一些常用的方法 自己手动去调用这些方法,来完成我们的功能code $('#txt').val('我是小明'); $('div').text('xx') ...