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.

Here's the CSS and the quote in HTML

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

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

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/