react CSS实现箭头图标

参考链接：
css3实现小箭头，各种图形
https://blog.csdn.net/tangtang5963/article/details/51490107

针对于三角形图标，以前的做法基本上是以图片实现上/下/左/右三角形图标。
但是，这样会导致项目空间变大，也即占用了空间，在传输的时候可能多一点时延。
为了解决这个问题，现在常用的方式是利用CSS实现箭头图标。

一、CSS样式中的transparent属性

查看css参考手册，对于transparent属性的定义是：用来指定全透明色彩。

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

二、观察border属性

对border属性的top、bottom、left、right分别赋色。

可以看出，一个正方体被划分为全等的四个三角形。

如果把左、右、下的颜色设置为透明，那么就是一个箭头向下的三角形了。

//css代码
.content{border-top:12px solid red;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid transparent;
}

三、其他样式
（1）css3实现心形

#heart {position: relative;width: 100px;height: 90px;
}
#heart:before,
#heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;
}
#heart:after {left: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin :100% 100%;
}

react CSS实现箭头图标相关推荐

html 向左箭头图标css,使用css实现箭头图标
写在前面的话我从来没有在自己博客上贴过图,因为我觉得麻烦,我喜欢用markdown写东西,如果要贴图的话感觉会不那么好管理.不过既然我决定做前端方面的工作,看来这图是一定要贴了.今天来点轻松点的话题 ...
html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆，三角形，椭圆)c
看到一些网站的椭圆边框是用css样式写出来得,请问怎样写? 首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签: 怎么把DIV做成椭圆形,CSS,最好有代码参见下面样式 ...
css实现箭头图标伪类图标
使用伪类伪类一定要相对定位 , 设置 content:"", 把border-left改为透明和border-right改为透明把border-left改为透明 left ...
笔记：使用CSS实现箭头图标
实现流程: div => 内容缩小,边框加粗 => 内容缩小为0 =>把下边框去掉,剩下上,左,右边框 => 设置左右边框为透明 .className::after{conte ...
用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...

react CSS实现箭头图标

一、CSS样式中的transparent属性

二、观察border属性

react CSS实现箭头图标相关推荐

最新文章

热门文章