SVG图像绘制多边形

在线演示

图一为初始状态；图二是鼠标滑过SVG图形上移30px；

html：

<div id="sec">
    <div id="sec-description">
        <h1>Helloh1>
        <p>If you...pain. p>
    div>
    <svg width="200px" height="500px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,200,0,200,350,0,250">polygon>
    svg>
div>

css：

#sec {
    background: url(images/07.jpg);
    width: 200px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#sec-description {
    position: absolute;
    color: #fff;
    box-sizing: border-box;
    padding: 0 30px;            
    z-index: 20;    
}
h1 {
    font-style: 48px;   
}
p {
    font-style: 14px;   
}
#polygon {
    fill: #34495e;/*修改多变形的背景颜色为深蓝绿色*/
    stroke-width: 0;/*去除多边形的边框*/
}

解析：
使用SVG绘制了一个宽度为200px的polygon多边形，在该多边形中定义了四个顶点坐标，分别为（0，0）、（200，0）、（200，350）和（0，250），依次以逗号分隔，形成了一个底边带有斜角的四边形。

上图二鼠标放上，css样式代码

#sec {
    background: url(images/07.jpg);
    width: 200px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#sec-description {
    position: absolute;
    color: #fff;
    box-sizing: border-box;
    padding: 0 30px;            
    z-index: 20;
    -webkit-transform-style: preserve-3d;/*解决闪动问题*/
}
h1 {
    font-style: 48px;
    -webkit-backface-visibility:  hidden;/*解决闪动问题*/
}
p {
    font-style: 14px;
    -webkit-backface-visibility:  hidden;/*解决闪动问题*/
}
#polygon {
    fill: #34495e;/*修改多变形的背景颜色为深蓝绿色*/
    stroke-width: 0;/*去除多边形的边框*/
}
/*动画效果*/        
#sec  svg { 
    transform: all .5s;     
    -webkit-transform: all .5s;         
}
#sec:hover svg {
    opacity: 0.6;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
}

下图为SVG绘制的斜角四边形：

第二张多边形：

<div id="sec">      
    <svg width="200px" height="500px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,200,0,200,350,100,350,0,250">polygon>
    svg>
div>

第三张多边形：

<div id="sec">      
    <svg width="300px" height="300px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,300,0,300,250,250,300,50,300,0,250">polygon>
    svg>
div>