css3制作各种箭头及心形图的制作

css3制作各种箭头

在前端页面开发中，经常会涉及到各种箭头的使用，常用的箭头是以图片的形式引入，制作精灵图，维护相对比较麻烦，但其实css3就可以实现相同的效果，同时css3实现的效果更加高效。

上代码：

1. 向上箭头

.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. 向右箭头

 .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;
        }

效果图如下：

向下向左的箭头写法都类似，三角形加矩形拼接即可。

拐弯的箭头制作如下：

.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两个，分别绘制两个图像，但三个怎么画呢？

其实换一种思维，将心形进行划分，可以发现两个矩形即可以制作心形

.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制作的图形，从多个不同的角度去思考，可能就会有突破角。