0

このグラフィックでサイトを作りたいのですが、私の問題は曲線です。曲線のイメージを作成したくありません。これは、レイアウトが解像度広告のベースでサイズ変更可能であるためです。内部でいくつかの遷移を行う必要があるためです。jQuery や css 3 でこのようなレイアウトを作成することはできますか? 半径境界などについては知っていますが、このようにどうすればよいかわかりません。可能ですか?背景は白ですが、左と右に nes と rss などの div があります。（注：曲線の左右の境界に影があります

ここに画像の説明を入力

4

4 に答える 4

2

OK、私はカイルのソリューションをいじって、なんとか何かを手に入れました

フィドル: http://jsfiddle.net/G6SHH/3/

div
{
    height: 500px;
    width: 200px;
    background: #ccc;
    border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}


div:after {
    background-color: white;
    border-radius: 50px 0 0 50px / 250px 0 0 250px;
    content: "";
    display: block;
    height: 498px;
    position: relative;
    right: -154px;
    width: 138px;
}

これは最新のブラウザでのみ機能します

于 2012-08-30T11:40:19.240 に答える
1

左側でそれを行うことはできますが、負border-radiusの値を受け入れないため、右側ではできません。

div
{
    height: 500px;
    width: 200px;
    background: #ccc;
    border: 3px solid #333;
    border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}​

http://jsfiddle.net/G6SHH/

もちろん、最上部の別の div の上にいつでも重ねることができますが、それは不要なマークアップであり、正直言って奇妙に見えます。

http://jsfiddle.net/G6SHH/1/

これには img を使用する必要があります。

于 2012-08-30T11:21:51.450 に答える
0

このソリューションをチェックアウトしてください：

ライブ デモ: http://codepen.io/anon/full/emAHu
ソース コード: http://codepen.io/anon/pen/emAHu

機能:
*divサイトのラッパーとして設定できるレイアウト内にコンテンツを配置できます。
* すべてが%ageベースです。つまり、すべてが柔軟です。

html

<div>
  <p>Content inside the paragragh</p>
</div>

CSS

div{
  position: absolute;
  background: url("http://placehold.it/400x400");
  width: 400px;
  height: 400px;
  border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
    /* border-radius: 40% 0 0 40%; */
  padding: 25px;
}


div:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  left: 60%;
  border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
  /*  border-radius: 40%; */
}
于 2012-08-30T11:40:20.360 に答える
0

Radiusをいじる必要があると思いますが、

私が試したもののリンクは次のとおりです。

とにかく、私は画像を背景として使用していたでしょう。このような場合には。

于 2012-08-30T11:40:10.673 に答える