遇到需要实现如下图标

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

而想要实现梯形，需要进行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. fiddler笔记：快捷工具栏

    WinConfig:   Comment 为所有选中的Session添加Comment. Replay Replay+ctrl 重新发送请求,而不包括任何条件请求头. Replay+shift 指定每 ...

  2. Docker pull 出现的 error pulling image configuration: Get https://dseasb33srnrn.cloudfront.net/

    vim /etc/sysconfig/docker OPTIONS='--selinux-enabled --log-driver=journald --signature-verification= ...

  3. Go入门所踩过的坑：cannot find package "" in any of

    问题:cannot find package "" in any of.现已按照博客解决,分享一种自己踩得坑欢迎大神指导交流! 首先使用go env查看当前环境变量,新手入门出现找 ...

  4. python3.7 lxml4.2.5 etree xpath 的使用

    #2019年10月14日11:08:49 from lxml import html etree = html.etree html = etree.HTML(response_dl.content) ...

  5. NOIP2009-2018简要题解

    口胡警告 NOIP2009 潜伏者 模拟 Hankson 的趣味题 对四个数\(a_0,a_1,b_0,b_1\)分解质因数,结果序列分别记为\(\{p1^{b1}\},\{p2^{b2}\},\{p ...

  6. 03 - Mongodb数据查询 | Mongodb

    1.基本查询 ①方法find():查询 db.集合名称.find({条件文档}) ②方法findOne():查询,只返回第一个 db.集合名称.findOne({条件文档}) ③方法pretty(): ...

  7. linux 目录结构及VIM

    目录结构及VIM 文件系统 说明: 文件系统就是操作管理存储设备或分区上的文件的方法和数据结构,也就是存储设备上组织文件的方式. 操作系统中负责管理和存储文件信息的软件机构叫文件管理系统,简称为文件系 ...

  8. 小程序 wxs时间戳转字符串

    function formatDate(value) { //不能使用 new Date() var time = getDate(value); var year = time.getFullYea ...

  9. 行内块和文字垂直对齐vertical-agign

    vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bott ...

  10. bash shell脚本之成员变量

    shell中变量的使用 cat test3: #!/bin/bash # testing variables days= guest="Katie" echo "$gue ...