相关疑难解决方法(0)

我一直试图用不均匀的圆形边做DIV,如下所示:

我已经检查了一些解决方案,我可以通过使用border-radius获得最接近的解决方案.我用过:

border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px; 

这就是我所拥有的:

如何才能做到这一点？

我想知道是否有可能只使用CSS实现弯曲边框(带笔划)？目前我正在使用图片为我的网站标题创建弯曲的边框:

我想将其更改为CSS解决方案,以便在更改内容量时我不必更改图像 - 我需要这些内容是动态的和响应式的,我已设法使用border-radius绘制曲线:

这对我来说效果要好得多,但是我想知道是否可以为它添加笔划以使其看起来更像图像表示？任何帮助是极大的赞赏.这是我为实现这个目的而编写的代码:

<div class="slider">
  <div class="slide">
    <!-- Content -->
  </div>
</div>

CSS:

.slider {
  background: #21639e;
}
.slider .slide {
  background: url("image.jpg") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
}

我确实尝试添加border-bottom: 5px solid #fff;到.slide类,但最终看起来像这样:

我已经为你创建了一个jsfiddle来测试我想要实现的目标.

我想用CSS修改这个矩形div/background的底部,所以结果是这样的:

是否有人有想法如何实现？

.curved {
  margin: 0 auto;
  width: 800px;
  height: 500px;
  background: lightblue;
}

<div class="container">
  <div class="curved"></div>
</div>