通过CSS基于图像创建自定义边框样式

我正在创建并想更改一些样式。我面临的一个挑战是为我最近的博客文章创建一个边界，使其看起来像附件中的一样。这是

我从我的设计师那里得到了答案。考虑到可伸缩性，我不打算使用图像作为背景。我听到一种使用左侧作为边框和背景的方法，重复它

我在这方面相对较新，如果有任何大师能指导我如何做到这一点，我将不胜感激。任何替代方法也可以

---

万分感谢

我知道您想使用边框CSS方法，但我认为如果您的内容发生任何变化，在不扭曲图像的情况下是很难做到的。 在仔细考虑并尝试了一些事情之后，我认为最好的方法是使用一个带有重复背景图像的伪元素来创建左边框效果。我认为这将是最灵活、反应最迅速的途径

由于我不确定您是否熟悉CSS，所以我将一个带有大量注释的CSS放在了一起。查看CodePen链接了解更多详细信息，但这是它的一般要点：

HTML

<div class="book"> Your content goes here... </div>

---

希望有帮助。您可以随意使用此代码和我为其制作的SVG（以代码笔显示）。

为什么不使用

背景图像

？或者您是否希望通过css将此边框创建为图像？您不应该在帖子中包含“感谢”。请看这篇文章：我使用边框图像css实现了我所需要的功能。这使我能够扩展图像大小。

.book {
  border: 2px solid #F3A333;
  position: relative;
}

.book:before { 
  content: ''; 
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: url(https://i.imgur.com/8X3apmL.png);
  background-size: 100% auto;
  width: 18px;
  transform: translateX(-55%);
}