纯CSS中带有笔触的弯曲边框? [英] Curved border with stroke in pure CSS?

问题描述

我想知道是否有可能仅使用CSS来获得弯曲的边框(带有笔触)?目前，我正在使用图片为网站标题创建弯曲的边框:

I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images:

我想将其更改为CSS解决方案，以便在更改内容量不大时不必更改图像-我需要使这些内容具有动态性和响应性，我设法使用边界半径:

I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius:

这对我来说效果更好，但我想知道是否可以向其添加笔触，使其看起来更像图像表示形式?任何帮助是极大的赞赏.这是我为实现此目的而编写的代码:

This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've written to achieve this:

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

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

I did try adding border-bottom: 5px solid #fff; to the .slide class, but it ended up looking like this:

我已经创建了 jsfiddle 供您测试我要实现的目标./p>

I've created a jsfiddle for you to test what I'm trying to achieve.

推荐答案

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

Yes, you can try and use box shadows to create this kind of border. Applying a white box shadow on the outer side of the element will make it look like a stroke/border.

这-border-bottom: 5px solid #fff;会产生另一种效果，因为我们仅对元素应用了底部边框.左侧和右侧的边界不存在( 零宽度 )，因此，当您靠近边缘时，线会变稀.

This - border-bottom: 5px solid #fff; produces a different kind of effect because we are applying only the bottom border to the element. The borders on the left and right are non existent (zero width) and so the line thins out as you go nearer to the edges.

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

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

Below is an updated version of your Fiddle.

要获得更优美的曲线，您还可以尝试以下方法.它使用比.slide宽的伪元素，然后将图像居中. (我认为这种方法使它看起来更接近原始图像，但选择权是您自己的)

For a more graceful looking curve then you can also try the below approach. It uses a pseudo element which is wider than the .slide and then centers the image within it. (I feel that this approach makes it look closer to the original image but the choice is yours)

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

这篇关于纯CSS中带有笔触的弯曲边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！