用CSS实现梯形图标
遇到需要实现如下图标
由图形分析,梯形,平行四边形等都可以由矩形变形而来。
而想要实现梯形,需要进行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实现梯形图标的更多相关文章
- 一步步打造自己的纯CSS单标签图标库
图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...
- CSS 让 fontawesome 图标字体变细
一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- 如何制作图标字体(如何将svg转换为css可用的图标字体)
转自: 如何制作图标字体(如何将svg转换为css可用的图标字体) 具体描述 在项目开发当中,我们常常遇到需要将获取到的svg转换为,css可用的图标字体,那么具体该如何进行操作呢 具体操作 登录ic ...
- 用CSS制作带图标的按钮
先上一张效果图
- 使用CSS创建有图标的网站导航菜单
在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS实现三角形图标的原理《转载》
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- 各种demo:css实现三角形,css大小梯形,svg使用
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
随机推荐
- 用命令将本地项目上传到git
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...
- .Net Core 3.0原生Json解析器
微软官方博客中描述了为什么构造了全新的Json解析器而不是继续使用行业准则Json.Net 微软博客地址:https://devblogs.microsoft.com/dotnet/try-the-n ...
- 剑指offer12:求解double类型的浮点数base和int类型的整数exponent的次方。 保证base和exponent不同时为0
1. 题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方.保证base和exponent不同时为0. 2. 思路和方法 分析: 由于 ...
- mysql 组合两张表
select P.FirstName,P.Lastname,A.City,A.State from Person P left join Address A on P.PersonId = A.Per ...
- 【Python基础】05_Python中的while循环
1.程序的三大流程介绍 顺序 —— 从上到下,顺序执行 分支 —— 根据条件判断,决定代码的分支 循环 —— 让特定代码执行 2.while 基本语法 while 条件(判断 计数器 是否达到 目标次 ...
- k8s认证及serviceAccount、userAccount
1.概述 用kubectl向apiserver发起的命令,采用的是http方式,K8s支持多版本并存. kubectl的认证信息存储在~/.kube/config,所以用curl无法直接获取apis中 ...
- IDEA的常见的设置和优化(功能)
转载 原文:https://blog.csdn.net/zeal9s/article/details/83544074
- Java lesson09Homework
1. 上转型对象的定义是什么?阐述自己对上转型对象的理解,用文字描述. 上转型:父类声明,子类实例化 叫做上转型. (自己的理解)上转型对象可以利用父类中的全员变量和方法,当子类进行全员变量隐藏或 ...
- 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) ...
- luogu2261余数求和题解--整除分块
题目链接 https://www.luogu.org/problemnew/show/P2261 分析 显然\(k\) \(mod\) \(i=k-\lfloor {k/i}\rfloor\) \(\ ...