5

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

the required result

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.

Alexander
  • 396
  • 1
  • 9
  • 19
  • to set a border for a size different from the bounds of your element i think you're going to have to use a psuedo element like `:before` and `:after`. Do you have access to javascript? you could potentially dynamically insert HTML into your `blockquote` elements – haxxxton Oct 21 '16 at 08:37

5 Answers5

5

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.

enter image description here

Jerome Indefenzo
  • 967
  • 6
  • 25
  • hahah damn, just got there myself, but with much more of a mess of gradients: https://jsfiddle.net/th5yvno2/ – haxxxton Oct 21 '16 at 08:56
  • 1
    I just used a [gradient generator](http://www.colorzilla.com/gradient-editor/) :)) – Jerome Indefenzo Oct 21 '16 at 08:57
  • Great trick, thanks! For future viewers: make sure you declare your background-image after your background-color or it'll not pop up. – Alexander Oct 23 '16 at 15:00
  • Is it possible to put the `background-image` on top of the `top-border`? Just caught my eye:) – Alexander Nov 16 '16 at 14:30
  • Hmm as far as I know there is no way to force backgrounds to overflow its container. And since borders strictly follow the box of the div, it's not possible to use a padding+negative margin hack either. So basically no, perhaps not possible while keeping the blockquote as a single element. – Jerome Indefenzo Nov 17 '16 at 02:49
0

Another option is to add this blue border as image and set it as background of blockquote ;)

Joint
  • 1,218
  • 1
  • 12
  • 18
0

DEMO:

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

Solution using background image while 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>
Mark Wilson
  • 1,324
  • 2
  • 10
  • 19
0

Here's my take on it.

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

You keep the ability to add backgrounds and stuff.

  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

Nebular Noise
  • 388
  • 3
  • 15
-1

You must add some absolute block element to you blockquote, you can do this by add in css:

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

And do not forget to add position: relative; to your blockquote css.

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

Joint
  • 1,218
  • 1
  • 12
  • 18
  • OP clearly says that they will need `before` and `after` elements for something else – haxxxton Oct 21 '16 at 08:42
  • so he can put content of blockquote in some `

    ` or `` and add it to it

     – Joint Oct 21 '16 at 08:43
  • OP says the dont want to add more than one element `"The tricky part is I want to stick with one element, the
    element, as the HTML will be generated by a WYSIWYG."`
     – haxxxton Oct 21 '16 at 08:47