使用html+css实现以下图形（不能用图片）

这是2015阿里巴巴前端实习生在线笔试题中的一道题

刚看到这道题的时候，其实我是一脸懵逼的，要实现这个图片的效果，而且没有给你图片。细看左边那个图形，发现都是一些简单得图形拼成的，那么就可以使用css的border来制作图形，应该是可以实现的。
下面是实现的代码：

效果是这样的，跟原图还是很像的：

下面附上使用纯css制作各种基本图形的代码及原理：

如何工作？

我们先看一段代码：

.css-arrow-multicolor { 
  border-color: red green blue orange; 
  border-style:solid; 
  border-width:20px; 
  width:0; 
  height:0; 
}

显示的图片是这样的：

由这个例子可以看出来，当高度和宽度都为零时，显示的就都是border的宽度了，这时候就可以由border来构成我们想要的图形了。比如，可以通过设置某一边的border然后把其他边的border设置为透明色来获得三角形，也可以通过设置border上右下左的不同宽度来使得三角形的高宽不同，而获得不同角度的三角形等。
我们看一个三角形：

对应的css为：

  width: 0;
  height: 0;
  border-bottom: 30px solid #999999; 
  border-left: 15px solid transparent; 
  border-right: 35px solid transparent;  

1、三角形都可以通过这种方式产出，包括上三角、右三角、下三角、左三角、左上、右上、右下、左下三角等。
2、而长方形和正方形的话可以直接通过div设置背景颜色得到，这样还可以在div中添加内容，当然，如果想直接通过border制作出来也是很简单得。
3、圆形的话，css3新增了border-radius属性，只需要让宽度和高度一致，然后设置boeder-radius为他们的一半就ok了。
4、椭圆形可以使用border-radius的X/Y两轴取值，制作出一种变形的圆角，在配合宽度等值，就制作了类似椭圆形的一个效果。css如下：

#oval { 
  width: 200px; 
  height: 100px; 
  background: red; 
  -moz-border-radius: 100px / 50px; 
  -webkit-border-radius: 100px / 50px; 
  border-radius: 100px / 50px; 
}

更多图形制作，请参考http://www.w3cplus.com/css/create-shapes-with-css