Question

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

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

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

顺便说一下，我正在使用bootstrap，这是我第一次使用bootstrap创建网站，所以任何指导都会非常感激。

Answer 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。

Answer 2

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

使用CSS或响应式图像创建响应式Pear Shape

2 个答案: