纯CSS中的弯曲边框？

Question

我想知道是否有可能只使用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来测试我想要实现的目标.

Answer 1

是的,您可以尝试使用框阴影来创建这种边框.在元素的外侧应用白色框阴影将使其看起来像笔触/边框.

这border-bottom: 5px solid #fff;会产生不同类型的效果,因为我们只将底部边框应用于元素.左侧和右侧的边框不存在(零宽度),因此当您越靠近边缘时,线会变薄.

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  height: 200px;  
  background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>

以下是您的小提琴的更新版本.

为了获得更优雅的曲线,您还可以尝试以下方法.它使用比其宽的伪元素,.slide然后将图像置于其中心.(我觉得这种方法让它看起来更接近原始图像,但选择是你的)

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.slider .slide:before {
  position: absolute;
  content: '';
  left: -2%;
  top: -6px;
  width: 104%;
  height: 100%;
  background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>