遇到需要实现如下图标

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

而想要实现梯形，需要进行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. 聊聊BIO、NIO与AIO的区别

    题目:说一下BIO/AIO/NIO 有什么区别?及异步模式的用途和意义? 1F 说一说I/O首先来说一下什么是I/O? 在计算机系统中I/O就是输入(Input)和输出(Output)的意思,针对不同 ...

  2. 剑指offer26：将二叉搜索树转换成一个排序的双向链表。要求不能创建任何新的结点，只能调整树中结点指针的指向。

    1 题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 2 思路和方法 在二叉搜索树中,每个结点都有两个分别指向其左.右子树的 ...

  3. dedecms发布文章时间显示多少分钟前

    /**文章发布多少时间前*/function tranTime($time) { $rtime = date("m-d H:i",$time); $htime = date(&qu ...

  4. composer在windows下安装并且设置全局变量

    Composer是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. 1丶使用安 ...

  5. shell习题第11题：输入数字执行命令

    [题目要求] 写一个脚本实现如下功能:输入一个数字,然后运行对应的一个命令 显示命令如下: *cmd menu* 1--data  2--ls 3--who 4--pwd 输入1时,会运行data [ ...

  6. Javascript中new的作用

    关于js中new关键字的理解,先来看个例子:像这样创建实例时使用new与不使用new有什么区别????function ParasiticPerson(name, age, job) {    var ...

  7. 在Pytorch上使用稀疏矩阵

    在Pytorch上使用稀疏矩阵 最近在写一个NLP的小项目,用到了Pytorch做神经网络模型.但是众所周知NLP的一个特点就是特征矩阵是稀疏矩阵,当时处理稀疏矩阵用的是scipy.sparse,现在 ...

  8. 处理python错误问题

    ------------恢复内容开始------------ 调试过程中遇到的问题 (1)爬取首页源码出现中文乱码 解决方案: 将网页编码强制转换成gbk,并去除解决乱码问题的三行代码. (2)程序运 ...

  9. idea的EasyCode使用

    EasyCode可以自动根据表格生成:entity,dao,service,serviceImpl,controller 使用方法: 一．安装EasyCode插件: File-setting-Plug ...

  10. react快速上手一（使用js语法，创建虚拟DOM元素）

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...