Double top border of which one is centered with a certain width on one element

Question

I've got a <blockquote> which I want to style with a double top border as shown in this image:

The tricky part is I want to stick with one element, the <blockquote> element, as the HTML will be generated by a WYSIWYG.

This is what I've got so far:

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

Keep in mind that I'll probably need :before and :after for the double quote strings.

Answer 1

Linear-gradient method

This technique makes use of linear-gradients. Be sure to vendor-prefix it for production.

Here's a fiddle.

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

---

Background image method

If you would rather have the blue bar fixed width and resizable, you could use a base64-encoded 1 pixel image as the background instead, as per @Joint's suggestion.

Here's a fiddle.

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

You can change the background-size to whatever you need it to be.

---