SVG 图像绘制多边形
图⼀为初始状态；图⼆是⿏标滑过SVG图形上移30px；
html：css：
<div  id ="sec">
<div  id ="sec-description">
<h1>Hello </h1>
<p >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 >
position: relative;
overflow: hidden;
}
box sizing
#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样式代码
下图为SVG绘制的斜⾓四边形：
第⼆张多边形：
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);}
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。