Question

我需要使元素包装器弯曲。我不提供代码，因为我不了解如何使用CSS创建这种效果，应该使用伪元素还是以其他方式实现？所以应该看起来像这样

Answer 1

只需弯曲任何div的顶部或底部即可完成

：

div{
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

对于凹面，可以使用伪元素。 HTML：

<div class="div1">
    <div class="div3"></div>
</div>

CSS：

.div1 .div3 {
  position: relative;
  background: #c0c0c0;
  height: 200px;
}
.div1 .div3::after {
 box-shadow: 0px 0px 0px 100px #c0c0c0;
  border-radius: 50%;
  position: absolute;
  height: 500px; /* increase height to increase the curvature */
  content: '';
  right: -40%;
  left: -40%;
  bottom: 100%;
  top: auto;
}

Answer 2

有一个用于凹顶部的解决方案，它涉及使用CSS伪元素。例如，假设我们的网站正文如下所示。 e


    <body>
        <div class="image-container">
            <img src="https://www.stockvault.net/data/2007/03/01/102413/thumb16.jpg" />
        </div>
    </body>

然后，我们添加一些CSS：



    .image-container {
        width: 600px;
        overflow: hidden;
        position: relative;
    }

    .image-container > img {
        width: 100%;
        display: block;
    }

    .image-container:before {
        content: ' ';
        display: block;
        position: absolute;
        top: -50px;
        width: 100%;
        height: 100px;
        border-radius: 50%;
        background: white;
    }

您可以使用伪元素的height和top属性来获得不同的曲线样式。

您可以在这里找到小提琴：https://jsfiddle.net/6thwnvz3/1/

Answer 3

这可能可以通过SVG和剪辑路径来实现（除非您计划支持IE或Edge）。

body,
html {
  margin: 0;
}

svg {
  width: 0;
  height: 0;
}

.img-clipped {
  clip-path: url(#myClip);
}

img {
  width: 100%;
}

<svg>
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.001996007984032,0.005882352941176)">
      <path d="M500.995 0H501V121H500.995H0V0H500.995ZM500.995 0C500.148 27.0905 388.322 49 250.5 49C112.678 49 0.852446 27.0906 0.00484801 4.3798e-05L500.995 0Z" clip-rule="evenodd"/>
      <path d="M500.995 121L0.00484801 121C0.852446 148.091 112.678 170 250.5 170C388.322 170 500.148 148.091 500.995 121Z"/>
    </clipPath>
  </defs>
</svg>


<img class="img-clipped" src="https://picsum.photos/1000/200" alt="">

注意：此特定SVG的原始尺寸为width="501" height="170"。因此，为了使clipPathUnits="objectBoundingBox"更好地工作，我不得不将SVG的<clipPath>元素按比例缩小1/501和1/170。

使用CSS使元素弯曲

3 个答案: