在CSS中，其border属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用CSS形成一些基本图形.

1.正三角形

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

如果设置height和width都为0,那么这个类样式的高就由border-bottom和border-top组成.宽就由border-left和border-right组成.所以这个三角形的宽为100px,高为50px.

网页中的效果如下:

2. 倒三角形

这个就比较简单了,只需把border-bottom改成border-top就行了.

.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

网页中的效果如下:

3. 左三角形

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}

网页中的效果如下:

4. 右三角形

.triangle_right
{
  height:0px; width:0px; 
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

网页中的效果如下:

5. 十字街效果

.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

网页中的效果如下: