双顶边框,其中一个在一个元素上以一定宽度居中

Question

我有一个<blockquote>我想用双顶边框设计的样子,如下图所示:

棘手的部分是我想坚持使用一个元素,即<blockquote>元素,因为HTML将由WYSIWYG生成.

这是我到目前为止所得到的:

blockquote
  background: #fafcfc
  border-top: 1px solid #dfe7e9
  border-bottom: 1px solid #dfe7e9
  font-size: 19px
  font-style: italic
  font-weight: 300
  padding: 45px 40px
  margin: 35px 0

请记住,我可能需要:before和:after双引号字符串.

Answer 1

线性梯度法

该技术利用线性梯度.请务必使用供应商作为生产前缀.

这是一个小提琴.

blockquote {
  background-image: linear-gradient(to right, rgba(41,137,216,0) 0%,rgba(37,131,210,0) 42%,rgba(37,131,210,1) 42%,rgba(36,129,208,1) 58%,rgba(36,129,208,0) 58%,rgba(32,124,202,0) 99%);
  background-position: top;
  background-size: 100% 8px;
  background-repeat: no-repeat;
}

背景图像方法

如果您希望蓝色条固定宽度并可调整大小,则可以使用base64编码的1像素图像作为背景,根据@ Joint的建议.

这是一个小提琴.

blockquote {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUabzwHwAEvAJ2QlOyvQAAAABJRU5ErkJggg==);
  background-position: top;
  background-size: 120px 8px;
  background-repeat: no-repeat;
}

您可以将其更改background-size为您需要的任何内容.