div没有图像

Question

我想创建一个包含此图形的网站，但我的问题是曲线，我不想创建曲线图像，因为布局可以在分辨率广告的基础上调整大小，因为我必须在内部进行一些转换。 可以使用jQuery或css 3来制作这样的布局吗？ 我知道半径边界等，但像这样我不知道该怎么做。有可能吗？背景是白色但是在左边和右边我有一些div与nes和rss例如。 （注意：曲线左右两侧有阴影

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的右侧边框，因为它显示在图像中有问题。

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

Answer 4

查看此解决方案：

现场演示：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%; */
}