CSS 边框底部的曲线

Question

我在 CSS 中需要这张图片，并且在此边框内需要一张背景图片。

我试过了

border-radius:0 0 50% 50%;
-webkit-border-radius:0 0 50% 50%;

但没有得到所需的形状。

如有任何帮助，我们将不胜感激。

Answer 1

边框半径：

您可以在 X 轴和 Y 轴上为元素指定不同的 border-radius 值，以获得带边框和背景图像的弯曲底部。

.curved-border {
  height: 200px;
  width: 400px;
  background: url(http://lorempixel.com/400/200/nature/1);
  border: 3px solid;
  box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */
  margin-bottom: 4px;
}
.sample1 {
  border-radius: 0% 0% 150% 150%/0% 0% 40% 40%;
}
.sample2 {
  border-radius: 0% 0% 100% 100%/0% 0% 30% 30%;
}

<div class='curved-border sample1'></div>
<div class='curved-border sample2'></div>

注意：正如您在评论中所观察到的，当我们使用这种方法甚至为 [=17= 设置更高的值时，底部边框确实会变得更细] 没有帮助。为了克服这个问题（在一定程度上），您可以添加一个虚拟 box-shadow（与边框颜色相同）。

box-shadow: inset 0px -1px 0px black;

剪辑路径：

您还可以使用 clip-path（和内联 SVG）创建带有背景图像的形状。对于这种特殊情况，我看不出使用这种方法比使用 border-radius 方法有多大优势（事实上，这是一个缺点，因为 IE 不支持）但是对于复杂的形状，SVG 允许更多地控制曲线、半径等

.curved-border {
  position: relative;
  height: 200px;
  width: 400px;
  background: black;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.curved-border:before {
  position: absolute;
  content: '';
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  top: 3px;
  left: 3px;
  background: url(http://lorempixel.com/400/200/nature/3);
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='curved-border'></div>

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 0,0.8 A.5,0.2 0 1,0 1,0.8 L1,0z' />
    </clipPath>
  </defs>
</svg>

使用 SVG 路径：

这也可以通过使用 SVG path 而不是 clip-path 来实现。浏览器对此的支持优于剪辑路径版本。

.curved-border {
  position: relative;
  height: 200px;
  width: 400px;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
svg path {
  fill: url(#g-image);
  stroke: black;
  stroke-width: 4;
}

<div class='curved-border'>
  <svg viewBox='0 0 200 100' preserveAspectRatio='none'>
    <defs>
      <pattern id='g-image' width='200' height='100' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/400/200/nature/4' width='200' height='100' />
      </pattern>
    </defs>
    <path d='M2,2 2,78 A98,20 0 1,0 198,78 L198,2z' vector-effect='non-scaling-stroke' />
  </svg>
</div>

Answer 2

您无法仅凭 CSS 准确到达那里；图像会做你需要的。

但是，您可以在 border-radius 上使用其他坐标来实现类似的效果，例如：

border-radius: 0 0 50% 50%/0 0 15% 15%

我有一个 pen with the demo 你也可以玩。

CSS 边框底部的曲线

Curved line at the bottom of border in CSS

css

border

css-shapes