用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);

可以由代码中注释的两行代码替换。

转载于:https://www.cnblogs.com/lyraLee/p/11027434.html

用CSS实现梯形图标相关推荐

css加号图标_一步步打造自己的纯CSS单标签图标库
原标题:一步步打造自己的纯CSS单标签图标库作者:深海鱼在掘金原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5 图标作为网页设计中的一部分,其在 ...
css写√的图标_用CSS来制作图标
想知道如何利用CSS来制作图标吗?并且只使用一个标签的情况下,不能使用伪元素哦! 在利用CSS制作图标时,经常用到border边框,所以,先看看边框的相关知识. 1.藏在border中的不能说的秘密 ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
css 字体字体图标_CSS基础知识：了解字体
css 字体字体图标 In this tutorial, we'll be learning about working with fonts in CSS! 在本教程中,我们将学习有关在CSS中使用 ...
react CSS实现箭头图标
参考链接: css3实现小箭头,各种图形 https://blog.csdn.net/tangtang5963/article/details/51490107 针对于三角形图标,以前的做法基本上是以 ...
html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
css动画--使用图标进行顺时针与逆时针转圈
css动画–使用图标进行顺时针与逆时针转圈说明:上面顺时针,下面图逆时针代码如下: <template><div style="width:1300px;height: ...

用CSS实现梯形图标

用CSS实现梯形图标相关推荐

最新文章

热门文章