CSS中边框底部的曲线

Question

我需要在CSS中使用此图像，并在此边框内部需要背景图像。

我试过了

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

但没有得到所需的形状。

任何帮助都将不胜感激。

Answer 1

使用Border Radius：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：正如您在评论中所观察到的那样，当我们使用此方法时，底部边框确实会变瘦，甚至为border-bottom-width设置更高的值也不会救命。要克服这个问题（在某种程度上），您可以添加一个虚拟box-shadow（与边框颜色相同）。

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

使用剪辑路径：

您还可以使用clip-path（和内嵌SVG）使用背景图像创建此形状。对于这个特殊情况，我没有看到使用这个优于border-radius方法的优势（事实上，由于IE中没有支持，这是一个缺点）但是对于复杂的形状，SVG允许更多的控制在曲线上，半径等。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用SVG路径：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你只能用CSS来实现目标;图像可以满足您的需求。

然而，你可以在border-radius上使用额外的坐标来达到类似的效果，例如：

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

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