项目需求：

要求制作上图所示的效果，能达到灵活可配的效果。我想初步想法是用div+css来制作。

抽象模型：

面对复杂的问题，要学会抽象当前的问题。下面的这个模型是我抽象出来的一个简单的解决方案。

这样我们就可以用各种css效果来组合出我们需要的效果，放到网站中可以灵活配置图形的各种样式。

技术难点：

1、如何做到让div旋转？

       -moz-transform: rotate(90deg);

       如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

2、如何设置div的层次关系？

     z-index

项目实战之玩转div+css制作自定义形状

原文：http://blog.csdn.net/cxl0921/article/details/47707875