参考链接:
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%;
}