在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. Eg

 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/