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

我正在使用Wordpress创建网站, 并希望更改某些样式。我面临的一个挑战是为我最近的博客帖子创建边框, 使其看起来像所附的边框。这是预期结果的图像

我有设计师提供的SVG图像文件。考虑到可伸缩性, 我不打算将图像用作背景。我听到了一种使用左侧作为边框并重复背景的方法。

我在这方面相对较新, 并且如果有任何上师可以指导我如何进行操作, 我将不胜感激。任何替代方法也可以。

太感谢了！

#1

我意识到你想使用border CSS方法, 但是如果你的内容发生根本变化, 那么不扭曲图像就很难做到。经过深思熟虑并尝试了一些尝试之后, 我认为最好的方法是使用带有重复背景图像的伪元素来创建该左边框效果。我认为这将是最灵活和响应最快的方法。

由于不确定你通常对CSS的熟悉程度, 因此我将CodePen演示与带有大量注释的CSS一起整理在一起。查看CodePen链接以获取更多详细信息, 但这是它的基本要点：

的HTML

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

的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%);
}

希望能有所帮助。随意使用此代码和我为此编写的SVG(显示在CodePen中)。