Question

我正在创建a website using Wordpress，并且想要更改某些样式。我面临的一个挑战是为我最近的博客文章创建一个边框，使其看起来像所附的一样。这是image of the expected outcome

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

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

谢谢！

Answer 1

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

由于不确定您通常对CSS的熟悉程度，因此我将CodePen demo与带有大量注释的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中）。

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

1 个答案: