用svg實現不規則形狀

像這種弧形，用純html和css很難寫，可是用svg就簡單多了。

能夠用做圖工具畫出一個弧形，而後導成svg格式。在頁面中，下面的白塊就是div+svg構成

 1 mixin svgCard(...cont)
 2     each item in cont
 3         .item
 4             svg.svg(width="480px" height="132px" viewBox="0 0 480 132")
 5                 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")
 6             .detail
 7                 .txt!= item[0]
 8 
 9 .content
10     +svgCard(
11         ['百年嚴謹的學風傳統'],
12         ['全球頂級大學的主要輸送處']
13                           

（這裏用的是pug模板）

---

 

兩種弧度的切換，主要是在hover的時候修改path值便可（注意兩個svg大小同樣）

1 $('.content .item').hover(function(){
2         $(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')
3     },function(){
4         $(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')
5 
6     })

---

 

若是不寫過渡css，這兩種弧形的切換會比較僵硬。（注意過渡css是寫在path上而不是svg上）

 1 path,.txt{
 2     transition: all 500ms ease;
 3 }
 4 
 5 .item:hover{
 6     path{
 7         transition: all 500ms ease;
 8     }
 9     .txt{
10         transition: all 500ms ease;
11         transform: translateY(-15px);
12     }
13 }