Curved line at the bottom of border in CSS

问题

I need this image in CSS and inside this border a background image needed.

I have tried

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

But not getting the required shape.

Any help would be appreciated.

回答1:

With Border Radius:

You can give the element a different border-radius value in the X and Y axis to obtain a curved bottom side with border and a background image.

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

Note: As you've observed in your comment, the bottom border does tend to get thinner when we use this approach and even setting a higher value for border-bottom-width does not help. To overcome this (to an extent), you could add a dummy box-shadow (the same color as the border).

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

With Clip Path:

You can also create this shape with a background image using clip-path (and inline SVG). For this particular case, I don't see much of an advantage in using this over border-radius approach (in fact, this is a disadvantage due to no support in IE) but for complex shapes, SVG allows more control over the curves, the radii etc.

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

With SVG Path:

This can also be achieved by just using SVG path instead of clip-path. Browser support for this is better than the clip path version.

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

回答2:

You can't get there precisely with just CSS; an image would do what you need.

You can, however, use additional co-ordinates on the border-radius to achieve a similar effect, e.g.:

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

I've got a pen with the demo which you can play with as well.

来源：https://stackoverflow.com/questions/34354770/curved-line-at-the-bottom-of-border-in-css

标签

css

border

css-shapes