css3 纯css实现绘制三角形、箭头效果

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。

1、利用border来实现
(1)向下三角形

.triangle{
	width: 0; 
 	height: 0;
 	border-width: 100px;
 	border-style: solid;
 	border-color:#ff0000 transparent transparent transparent;
 }

(2)向左三角形

.triangle{
	width: 0; 
 	height: 0;
 	border-width: 50px;
 	border-style: solid;
 	border-color: transparent #ff0000 transparent transparent;
 }

(3)利用 CSS3 transfrom 旋转 45 度实现三角形

  css3 transfrom 三角形
  

.triangle {
    position:relative;
    width:200px;
    height:60px;
    line-height:60px;
    background:#E9FBE4;
    box-shadow:1px 2px 3px #E9FBE4;
    border:1px solid #C9E9C0;
    border-radius:4px;
    text-align:center;
    color:#0C7823;
}
.transform {
    position:absolute;
    bottom:-8px;
    bottom:-6px;
    left:30px;
    overflow:hidden;
    width:13px;
    height:13px;
    background:#E9FBE4;
    border-bottom:1px solid #C9E9C0;
    border-right:1px solid #C9E9C0;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

总结： transparent是透明的意思，也就是与背景色同化。

2、利用伪类实现箭头

(1)向左箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-bottom: 20px transparent dashed;
 border-right: 20px #fff solid;
}
.arrow:before{
 border-right: 20px #ff0000 solid;
}
.arrow:after{
 left: 4px; /*通过覆盖调整箭头粗细*/
 border-right: 20px #fff solid;
}

(2)向上箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-right: 20px transparent dashed;
 border-bottom: 20px #fff solid;
}
.arrow:before{
 border-bottom: 20px #ff0000 solid;
}
.arrow:after{
 top: 4px; /*通过覆盖调整箭头粗细*/
 border-bottom: 20px #fff solid;
}

(3)利用 CSS3 transfrom 旋转 来实现多方向箭头

比如：向下箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-right: 20px transparent dashed;
 border-bottom: 20px #fff solid;
}
.arrow:before{
 border-bottom: 20px #ff0000 solid;
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg);
}
.arrow:after{
 border-bottom: 20px #fff solid;
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg);
 bottom: -36px; /*通过覆盖调整箭头粗细*/
}