用css或jquery製作distrot div

Question

這可能會使圓角扭曲。 所有角落都是不同的半徑？

任何jQuery的鏈接或CSS 這將是交叉的browers 我盡我所能的解決方案，但力發現 任何幫助

Answer 1

你可以做到這一點with CSS

div { 
    border-radius: 1px 2px 3px 4px; /* top-left top-right bottom-right bottom-left */ 
} 

MDN是一個非常尋找css/js規格的好資源。對於jQuery使用他們的official docs

Answer 2

是的！您可以使用CSS這樣

div{ 
    border-top-left-radius:5px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:12px; 
} 

Js Fiddle example

更新所有角落設置不同border-radius： 您在您的評論已經共享了畫面的效果需要CSS 1.邊境的兩個屬性-radius
2.變換

因此，這裏是代碼來實現這個

div 
{ 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    border-bottom-left-radius:50px; 
    border-bottom-right-radius:10px; 
    background-color:Gray; 
    height:200px; 
    width:350px; 
    transform:rotate(-15deg); 
    -webkit-transform: rotate(-15deg); 
} 

Updated Js Fiddle

Answer 3

對於跨瀏覽器，你需要添加所有的瀏覽器的CSS定義。

-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 20px; 
-webkit-border-bottom-right-radius: 40px; 
-webkit-border-bottom-left-radius: 30px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 20px; 
-moz-border-radius-bottomright: 40px; 
-moz-border-radius-bottomleft: 30px; 
border-top-left-radius: 10px; 
border-top-right-radius: 20px; 
border-bottom-right-radius: 40px; 
border-bottom-left-radius: 30px; 

DEMO http://jsfiddle.net/kevinPHPkevin/WVBTJ/