用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为正 ...
随机推荐
- java微信token校验
1.微信验证接口 package com.park.utils.wechatUtil; import org.springframework.web.bind.annotation.RequestMa ...
- dede按照权重排序dede：list和得的：arclist
dede:list 的方法 1.找到"根目录\include\arc.listview.class.php"文件. 2.修改代码:在文件第727行处添加按weight排序判断代码( ...
- iframe/frameset/frame的区别
目录 iframe iframe属性的用法 iframe属性的取值 iframe的书写格式 frameset frameset的用法(框架模板) frameset属性的属性值 frame frame的 ...
- netty 自定义协议
netty 自定义协议 netty 是什么呢? 相信很多人都被人问过这个问题.如果快速准确的回复这个问题呢?网络编程框架,netty可以让你快速和简单的开发出一个高性能的网络应用.netty是一个网络 ...
- jvm常用命令
jps // 查看Java进程ID和main方法类名 jstack <进程ID> // 查看该进程的所有栈信息 jstack -l <进程ID> // 查看该进程的所有栈信息, ...
- 微信小程序登录获取手机号
一,发送请求携带 code 到后台换取 openid var that = this; wx.login({ success(res) { console.log(res); var code = r ...
- JComboBox实现时间控件
1.认识JComboBox控件 最近学习使用了JComboBox组件: 在学习使用了JList以及Jtree组件之后,对于使用JComboBox还是很轻松的. JcomboBox的其实也是由一个Mod ...
- impala 建表时报错，不支持中文
1.错误信息 (1366, "Incorrect string value: '\\xE6\\x8E\\x88\\xE6\\x9D\\x83...' for column 'search' ...
- 记录一次ABP下载模板的坑
1.拉取ABP官网的模板的最新代码,我的代码结构是这样的 https://aspnetboilerplate.com/Templates 环境安装的部分我就不说明了.node.js npm 等等部分 ...
- css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...