1

对于一个项目，我必须创建一个梨形容器。我尝试使用 CSS3 圆角来执行此操作，但它看起来并不完全像它。然后我在底部使用了一个图像，但我需要它是响应式的（可缩放图像）。

我想编写如下代码： http ://tinypic.com/view.php?pic=98fxid&s=5

但是当您最小化浏览器屏幕时，布局会中断并且梨形不可扩展。我想知道是否有一种方法可以使用 CSS3 或更好的方法来使用可缩放图像来做到这一点。

顺便说一句，我正在使用引导程序，这是我第一次尝试使用引导程序制作网站，因此非常感谢任何指导。

4

2 回答 2

1

您可以使用两个相交的圆段创建梨形，一个用于左侧，一个用于右侧。圆段是通过将圆限制在其父容器中来创建的overflow: hidden;。:before为了简化标记，您可以使用和/或:after伪元素创建子圆元素。

HTML：

<div class="content-form">
    <div class="pear-shape left"></div>
    <div class="pear-shape right"></div>
</div>

CSS：

.content-form {
    width: 75%;
    max-width: 325px;
    height: 200px;
    background: url(http://www.domainandseo.com/bootstrap/img/design.png);
    position: relative;
}
.pear-shape {
    overflow: hidden;
    width: 50%;
    height: 200px;
    position: relative;
    top: 100%;
}
.left { float: left; }
.right { float: right; }
.pear-shape.left:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 200%;
    height: 100%;
    border-radius: 0 0 0 250px;
    background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
.pear-shape.right:before {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 200%;
    height: 100%;
    border-radius: 0 0 250px 0;
    background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}

看看这个例子Fiddle。

于 2013-09-03T23:00:48.407 回答
0

在某些时候，您将能够使用 css 形状模块，并且可能有一些浏览器已经支持它。同时，您可能希望将 SVG 或画布视为一种选择。

于 2013-09-03T20:31:47.420 回答