css有一个很神奇的功能clip-path，它能裁剪元素，可以裁剪出各种形状，比如：5边形、6边形、多边形、不规则图形等。十分强大。

css裁剪元素

裁剪神器

http://tools.jb51.net/code/css3path

属性 用法

部分摘抄菜鸟教程

属性定义及使用说明

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

语法

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
clip-source：用 URL 表示剪切元素的路径。
basic-shape：将元素裁剪为基本形状：圆形、椭圆形、多边形或插图。
margin-box：使用外边距框作为引用框。
border-box：使用边框作为引用框。
padding-box：使用内边距框作为引用框。
content-box：使用内容框作为引用框。
fill-box：使用对象边界框作为引用框。
stroke-box：使用笔触边界框（stroke bounding box）作为引用框。
view-box：使用最近的 SVG 视口（viewport）作为引用框。
none：这是默认设置。 没有剪辑。
initial：设置属性为默认值。
inherit：属性值从父元素继承。
polygon()：polygon函数自定义裁剪路径。
关于polygon函数自定义裁剪路径，用上面的神器，设置好自己的图像，然后vc大法。