不带图像的div舍入

Question

我想用这个图形做一个网站，但我的问题是曲线，我不想创建一个曲线的图像，因为布局在分辨率广告的基础上是可调整的，因为我必须在里面做一些过渡。有没有可能用jQuery或CSS3来做这样的布局？我知道半径边界等，但像这样我不知道该怎么做。背景是白色的，但在左边和右边，我有一些带有nes和rss的div。(注意:曲线的左右边框上有阴影

​

​

Answer 1

好的，我尝试了Kyle的解决方案，并设法得到了一些东西

小提琴：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;
}

这只会在现代浏览器中工作

Answer 2

你可以让左边这样做，但不能让右边这样做，因为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。

Answer 3

我想你得玩弄Radius了

这是我尝试的链接：http://jsfiddle.net/amandeepj/45XzA/然而，我不能获得凹面边框，也就是DIV的右侧边框，因为它显示在有问题的图像中。

无论如何，我会使用图像作为背景。在这种情况下。