经常在有些网站上看到一些三角图形，但通常这些都是图片，现在石头就教你如何用纯css3技术来绘制三角图形。
下面是具体步骤，把这些看一遍你也就懂得怎样来绘制三角形、箭头了。
1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。
<div class="box"></div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形</title>
<style>
.box{
margin: 20px auto;//设置图形居中
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: #2DCB70;
border-right-color:gold;
border-bottom-color: #333333;
border-left-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
截图如下：
这就相当于分别把四个边框向正方形的中心拉伸。
上面的代码出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，
4，实例
分别绘制向下，向右，向左向上的三角形。
实现代码如下。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形</title>
<style>
.box{
margin: 20px auto;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: #2DCB70;
border-right-color:gold;
border-bottom-color: #333333;
border-left-color: red;
}
.box1{
margin: 5px auto;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: #2DCB70;
}
.box2{
margin: 5px auto;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: red;
}
.box3{
margin: 5px auto;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-right-color:gold;
<span style="white-space:pre"> </span>} .box4{
margin: 0 auto;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom-color: #333333;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>截图如下：
从以上图形可以看出：
绘制向下的三角形箭头，就相当于将上边框向下拉伸。
border-top-color: #2DCB70;
绘制向上的三角形箭头，就相当于将下边框向上拉伸。
border-bottom-color: #333333;
绘制向左的三角形箭头，就相当于将右边框向左拉伸。
绘制向右的三角形箭头，就相当于将左边框向右拉伸。
看完上面的你也就学会用CSS绘制三角形箭头了。
原文地址：http://blog.csdn.net/qiushi_1990/article/details/41956799
