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

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

<div class="triangle"></div>

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 度实现三角形

<div class="triangle">
  <span>css3 transfrom 三角形</span>
  <div class="transform"></div>
</div>

　　

.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是透明的意思，也就是与背景色同化。