css3制作各种箭头
在前端页面开发中,经常会涉及到各种箭头的使用,常用的箭头是以图片的形式引入,制作精灵图,维护相对比较麻烦,但其实css3就可以实现相同的效果,同时css3实现的效果更加高效。
上代码:
1. 向上箭头
<span class="moveUp"></span>
.moveUp{ /*箭头占位符,规定宽高等*/
width: 15px;
height: 25px;
display: inline-block;
position: relative;
cursor: pointer;
}
.moveUp:before, .moveUp:after{ /*伪元素相同属性提取*/
content: '';
border-color:transparent; /*边框颜色透明*/
border-style: solid;
position: absolute; /*绝对定位,分别定位before和after描绘的内容*/
}
.moveUp:before{ /*伪元素before绘制箭头尾部矩形*/
border: none;
background: #555;
height: 60%;
width: 30%;
top:50%;
left: 8px;
}
.moveUp:after{ /*伪元素after绘制箭头的头部三角形*/
left: 3px;
top: -5%;
border-width: 7px;
border-bottom-color: #555; /*如果绘制向下三角形的话,用border-top-color:#555;*/
}
效果图如下:
是不是很方便,随时调整箭头大小等。
2. 向右箭头
<span class="arrowRight"></span>
.arrowRight{ /*整个箭头容器*/
width:40px;
height:40px;
display: inline-block;
position: relative; /*相对定位*/
}
.arrowRight:before,.arrowRight:after{
content: '';
border-color: transparent; /*伪元素边框颜色为透明*/
border-style: solid;
position: absolute; /*伪元素绝对定位*/
}
.arrowRight:after{ /*箭头尾部的矩形*/
width: 60%;
height: 9%;
background-color: #555;
top: 5px;
left: 0;
}
.arrowRight:before{ /*箭头三角形*/
border-left-color: #555;
border-width: 10px;
left: 30px;
top: 0;
}
效果图如下:
向下向左的箭头写法都类似,三角形加矩形拼接即可。
拐弯的箭头制作如下:
<span class="arror"></span>
.arror{
width:100px;
height:100px;
display: inline-block;
position: relative;
}
.arror:before,.arror:after{
content: '';
position: absolute;
border-style:solid;
border-color:transparent; /*统一规定边框颜色为透明色*/
}
.arror:before{ /*四分之一的园制作*/
width: 30px;
height: 30px;
border-radius: 100%;
border: 10px solid transparent;
border-left-color: #555;
transform: rotate(45deg); /*旋转45deg*/
left: 0;
top: 10px;
}
.arror:after{ /*三角形*/
border-width: 14px;
border-left-color: #555;
top: 2px;
left: 24px;
}
效果图如下:
在加写一个心形的制作:
之前一直觉得桃心的制作时上面两个园加下面一个三角形的拼接,但是css3中伪元素,在元素上常用的只有before和after两个,分别绘制两个图像,但三个怎么画呢?
其实换一种思维,将心形进行划分,可以发现两个矩形即可以制作心形
<span class="heart"></span>
.heart{ /*容器占位*/
width: 200px;
height:200px;
display: inline-block;
position: relative;
}
.heart:before,.heart:after{
content: '';
position: absolute;
}
.heart:after{ /*左边矩形,左上,右上圆角半径为50px,右下,左下没有圆角*/
width: 30px;
height: 44px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg); /*逆时针旋转45deg*/
top: 0;
left: -10px;
}
.heart:before{ /*右边矩形,左上,右上圆角半径为50px,右下,左下没有圆角*/
width: 30px;
height: 44px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(45deg); /*顺时针旋转45deg*/
top: 0;
left: 0;
}
效果图如下所示:
总之,对于利用css3制作的图形,从多个不同的角度去思考,可能就会有突破角。