0

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

在此处输入图像描述

4

4 回答 4

2

好的，我玩弄了凯尔的解决方案并设法得到了一些东西

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

我猜你必须玩 Radius，

这是我尝试过的链接：http: //jsfiddle.net/amandeepj/45XzA/但是，我无法实现凹形边框，即 DIV 的右侧边框，如有问题的图像所示。

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

于 2012-08-30T11:40:10.673 回答
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 回答