遇到需要实现如下图标

由图形分析，梯形，平行四边形等都可以由矩形变形而来。

而想要实现梯形，需要进行3D变换，需要使用css3的 perspective属性。

属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

DEMO：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background: #eee;

        }

        .a {

            position: relative;

            width: 40px;

            height: 200px;

            background:transparent;

            /* perspective: 1em; */

        }

        .a::before {

            content: "";

            position: absolute;

            border: 1px solid #ddd;

            background-color: #fff;

            top: 0; right: 0; bottom: 0; left: 0;

            transform: perspective(1em) rotateY(3deg);

            /* transform:  rotateY(3deg); */

        }

        .a:hover:before{

            background-color: transparent;

        }

    </style>

</head>

<body>

    <div class="a"></div>

</body>

</html>

上面代码中的

transform: perspective(1em) rotateY(3deg);

可以由代码中注释的两行代码替换。

用CSS实现梯形图标的更多相关文章

  1. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  2. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

  3. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

  4. 如何制作图标字体（如何将svg转换为css可用的图标字体）

    转自: 如何制作图标字体(如何将svg转换为css可用的图标字体) 具体描述 在项目开发当中,我们常常遇到需要将获取到的svg转换为,css可用的图标字体,那么具体该如何进行操作呢 具体操作 登录ic ...

  5. 用CSS制作带图标的按钮

    先上一张效果图

  6. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  7. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  8. CSS实现三角形图标的原理《转载》

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

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

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

随机推荐

  1. Python 第二式

    @Codewars Python练习 question ** Simple transposition ** Simple transposition is a basic and simple cr ...

  2. 用bisect来管理已排序的序列

    bisect 模块包含两个主要函数,bisect 和 insort,两个函数都利用二分查找算法来在有序序列中查找或插入元素. 2.8.1 用bisect来搜索 bisect(haystack, nee ...

  3. sql server的循环语句

    WITH TEST_CTEAS(SELECT id,position,Parentid,Cast(Parentid AS NVARCHAR(4000)) AS PATHFROM op_client_s ...

  4. Python爬取爱奇艺资源

    像iqiyi这种视频网站,现在下载视频都需要下载相应的客户端.那么如何不用下载客户端,直接下载非vip视频? 选择你想要爬取的内容 该安装的程序以及运行环境都配置好 下面这段代码就是我在爱奇艺里搜素“ ...

  5. vue组件常用传值

    一.使用Props传递数据   在父组件中使用儿子组件 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"&g ...

  6. 用Leangoo泳道完美实现Scrum任务看板

    转自:https://www.leangoo.com/9568.html 在敏捷开发的实践当中,通过可视化的任务看板来实现团队协同和透明化管理是必不可少的一个实践.通过可视化的任务看板我们可以达到如下 ...

  7. ajax 传参数 java后台接收

  8. C语言编译过程及相关文件

    1,C程序编译步骤 C代码编译成可执行程序经过4步: 1)预处理:宏定义展开.头文件展开.条件编译等,同时将代码中的注释删除,这里并不会检查语法 2)编译:检查语法,将预处理后文件编译生成汇编文件 3 ...

  9. Docker镜像拉取失败或超时的解决办法：添加国内镜像

    $ docker pull php:7.1-fpm-alpine Error response from daemon: Get https://registry-1.docker.io/v2/: n ...

  10. 移动端rem移动适配

    https://www.cnblogs.com/jingwhale/p/5741567.html