Big Quotation marks styled in html css

Question

How would I style a quote with those huge quotation marks?

I have tried most of the examples shown online. Using Block quote with the :before and :after css styles. The issue I'm having is avoiding the use of a image in div's wrapped around text, because of responsiveness. I'm also using the Twitter Bootstrap framework.

The Quote in html:

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

And the css:

blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before { 
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
} 
blockquote h3:after { 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
}

The problem is getting to look like this example.Although the responsiveness does sort of work. The Quotation marks are not positioned diagonally from one another

Answer 1

Although it's not clear after reading your question I guess you want to change the shape of quotation marks.

Pick a proper unicode value and add a quotes property. E.g.

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote h3 {
font-size:21px;
}

blockquote h3:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote h3:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
  
}

<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

You may also want to change the font-family so the shape of quotation marks is more suitable to your desires.

Here is jsfiddle.

Answer 2

The Quotation marks are not positioned diagonally from one another

So just position them:

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

Or like in this demo: http://jsfiddle.net/pz6kx0bw/