遇到需要实现如下图标

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

而想要实现梯形，需要进行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. Hystrix的概念

             Netflix的 Hystrix 是一个帮助解决分布式系统交互时超时处理和容错的类库, 它同样拥有保护系统的能力.       Hystrix的设计原则包括:资源隔离.熔断器.命令模 ...

  2. 欢迎使用f MWeb

    MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技术打造,追求与系统的 ...

  3. S02_CH09_UART串口中断实验

    S02_CH09_UART串口中断实验 本章的UART中断将在之前PL_PS中断和定时器中断上推导出来,因此本章有点难度,如果前两章还不是很熟悉的话,需要返回到前面两章把这两章的内容再次消化一下,再来 ...

  4. 不吹不黑，赞一下应用运维管理的cassacdra

    不吹不黑的为菊厂的应用运维管理AOM点个赞.Why? 某菊厂应用运维管理工具AOM每天处理着亿级条数据,这么多数据是怎么存储的呢? 说到数据存储就会想到关系型数据库,比如mysql,oracle,sy ...

  5. Callable和Future的区别

    Callable 在Java中,创建线程一般有两种方式,一种是继承Thread类,一种是实现Runnable接口.然而,这两种方式的缺点是在线程任务执行结束后,无法获取执行结果.我们一般只能采用共享变 ...

  6. Rikka with Competition hdu 6095

    签到题目,排序然后按序清理掉一定会输的结果就可以. ac代码: #include <iostream> #include <cstdio> #include <cstri ...

  7. 阿里云 负载均衡 HTTP转HTTPS

    一.相关文档 1.证书服务 2.简单路由-HTTP 协议变为 HTTPS 协议 二.阿里云操作界面 1.云盾证书服务管理控制台(查询CA证书服务) 2.负载均衡管理控制台 三.相关文档 1.Syman ...

  8. JS数组去掉重复元素

    JS数组去掉重复元素,这里提供3中写法. var arr =[1,2,3,4,5,6,3,4,7,2,4,1,8]; 输出:[1,2,3,4,5,6,7,8]; 1.使用indexOf() arr.i ...

  9. docker第一篇 容器技术入门

    Container 容器是一种基础工具,泛指任何可以容纳其它物品的工具. Linux Namespaces (docker容器技术主要是通过6个隔离技术来实现) namespace    系统调用参数 ...

  10. win10环境安装配置Nginx

    前言: 参考 https://blog.csdn.net/kisscatforever/article/details/73129270 Nginx的应用场景      1. http服务器.Ngin ...