css - 使用 CSS 或响应式图像创建响应式梨形

Question

对于一个元素，我必须创建一个梨形容器。我尝试使用 CSS3 圆 Angular 来做这个，但它看起来并不完全像。然后我在底部使用了一个图像，但我需要它是响应式的(可缩放图像)。

我想编写如下代码: 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 .