用svg实现不规则形状

像这种弧形，用纯html和css很难写，但是用svg就简单多了。

可以用作图工具画出一个弧形，然后导成svg格式。在页面中，下面的白块就是div+svg构成

 mixin svgCard(...cont)
     each item in cont
         .item
             svg.svg(width="480px" height="132px" viewBox="0 0 480 132")
                 path(d="M0 31c109.323 19.23 189.323 28.845 240 28.845 50.677 0 130.677-9.615 240-28.845v100H0V31z" fill="white")
             .detail
                 .txt!= item[0]

 .content
     +svgCard(
         ['百年严谨的学风传统'],
         ['全球顶级大学的主要输送处']
                           

（这里用的是pug模板）

---

两种弧度的切换，主要是在hover的时候修改path值即可（注意两个svg大小一样）

 $('.content .item').hover(function(){
         $(this).find('path').attr('d','M0 31.398C109.323 10.466 189.323 0 240 0c50.677 0 130.677 10.466 240 31.398V131.52H0V31.398z')
     },function(){
         $(this).find('path').attr('d','M0 31c109.323 19.23 189.323 28.845 240 28.845 50.677 0 130.677-9.615 240-28.845v100H0V31z')

     })

---

如果不写过渡css，这两种弧形的切换会比较僵硬。（注意过渡css是写在path上而不是svg上）

 path,.txt{
     transition: all 500ms ease;
 }

 .item:hover{
     path{
         transition: all 500ms ease;
     }
     .txt{
         transition: all 500ms ease;
         transform: translateY(-15px);
     }
 }