The double upper border of which has a center with a certain width on one element

Question

I have a <blockquote> that I want to create with a double top border, as shown in this image:

The tricky part is that I want to stick to one element - the <blockquote> element, since the HTML will be generated by WYSIWYG.

This is what I have 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 will need :before and :after for double quote strings.

Answer 1

Linear gradient method

This method uses linear gradients. Be sure to submit it for production.

Here is the violin.

 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 prefer a fixed width of the blue strip and resizable, you can use base64-encoded 1 pixel image as the background instead, as suggested by @Joint.

Here is the violin.

 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.

---

Answer 2

Another option is to add this blue frame as the image and set it as a blockquote background;)

Answer 3

DEMO:

http://plnkr.co/edit/PMcA6au98ids02jXh7YV?p=preview

Solution using background image when reserving psuedo elements for blockquote:

 blockquote { width: 300px; /*box-shadow: inset 1px 22px 1px -17px magenta;*/ background-image: url('http://i.imgur.com/ND7TghA.jpg'); background-repeat: no-repeat; background-position: top center; border-top: solid 2px #dde7e9; border-bottom: solid 2px #dde7e9; height: auto; padding: 15px; position: relative; } blockquote:before, blockquote:after { position: absolute; } blockquote:before { content: '"'; top: 5px; left: -5px; } blockquote:after { content: '"'; bottom: 5px; right: -5px; } 

 <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote> 

Answer 4

Here I accept it.

Use blockquote:first-child:before and blockquote:first-child:after for your quotes. Or ::last-child:before

You have the ability to add backgrounds and more.

  blockquote { margin: 35px 0; background: #fafcfc; border-top: 1px solid #dfe7e9; border-bottom: 1px solid #dfe7e9; font-size: 19px; font-style: italic; font-weight: 300; padding: 45px 40px; } blockquote:before { content: ''; position: absolute; width: 4%; left: 48%; /* 2*left+width=100% */ top: 35px; /* =blockquote margin */ border-top: 5px solid blue; } 

http://codepen.io/anon/pen/amPwOK

Answer 5

You must add an absolute block block to you, you can do this by adding to css:

 blockquote:before content: ' '; display: block; position: absolute; width: 30px; height: 5px; background: blue; top: 0; margin: auto; left: 0; right: 0; 

And don't forget to add position: relative; into your blockquote css.

Edit: To use :before and :after for a quote, you can add some container, like <p> or <span> inside a blockquote, and then add it for it.