使用CSS或响应图像创建响应的梨形

对于一个项目，我必须创建一个梨形容器。我试着用CSS3圆角来做这件事，但看起来并不完全一样。然后我在底部使用了一个图像，但我需要它具有响应性（可伸缩图像）

我想编写如下代码：

但是，当您最小化浏览器屏幕时，布局会中断，梨形无法缩放。我想知道是否有一种方法可以使用CSS3实现这一点，或者有一种更好的方法可以使用可伸缩图像实现这一点

---

顺便说一句，我正在使用bootstrap，这是我第一次尝试使用bootstrap创建网站，因此非常感谢您的指导。

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

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

您可以使用两个相交的圆段创建梨形，一个用于左侧，另一个用于右侧。通过

overflow:hidden将圆限制为其父容器来创建圆段。为了简化标记，可以使用
：before
和/或
：after
伪元素创建子圆元素

HTML:

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

HTML:

看看这个例子。
这是一个很弱的答案。你有没有一个例子来说明如何使用你提到的任何一个选项来实现这一点？对于css形状模块，因为它目前还没有完全定义，它可能必须使用两个div和shape-outside来完成（参见示例）。对于SVG，您可以在illustrator或其他矢量程序中创建SVG图像，并使用它。诀窍主要在于内容的布局。使用css形状模块，这是一个很弱的答案。你有没有一个例子来说明如何使用你提到的任何一个选项来实现这一点？对于css形状模块，因为它目前还没有完全定义，它可能必须使用两个div和shape-outside来完成（参见示例）。对于SVG，您可以在illustrator或其他矢量程序中创建SVG图像，并使用它。诀窍主要在于内容的布局。我想你可以在整个曲线区域使用SVG背景图像（而不是像你尝试显示的那样，只使用尖端），背景宽度为100%（或一个背景覆盖选项）。因为它是一个矢量图形，所以它可以平滑地缩放，文件大小也会很小。我认为您可以使用SVG背景图像来显示整个弯曲区域（而不是像您尝试显示的那样仅显示尖端），背景宽度为100%（或一个背景覆盖选项）。因为它是一个矢量图形，所以它可以平滑地缩放，文件大小也会很小。
<div class="content-form">
    <div class="pear-shape left"></div>
    <div class="pear-shape right"></div>
</div>

.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);
}