css - css や jquery で distrot div を作る

Question

角を丸くしてdivを歪ませることは可能ですか？すべての角は異なる半径ですか？

クロスブラウザになる任意の jquery リンクまたは css

Answer 1

はい！！border-radiusこのようなcssを使用して、すべてのコーナーに異なる設定を行うことができます

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

Jsフィドルの例

更新: コメントで共有した画像の効果には、css 1.border-radius 2.transform の 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); 
}

更新された Js Fiddle

Answer 2

クロス ブラウザーの場合、すべてのブラウザー 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;

デモhttp://jsfiddle.net/kevinPHPkevin/WVBTJ/

Answer 3

CSSでできます

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

MDNは、css / js 仕様を検索するための非常に優れたリソースです。jquery については、公式ドキュメントを使用してください