Quotes in top-left and bottom-right corner of div

Question

I want to have a div looking like the following picture with quotes in the top left and bottom right corner of it and am wondering what would be a good way to achieve it without images.

Answer 1

use :before and :after

div{
    padding: 25px;
    background: #5BC5F2;
    max-width: 300px;
    height: 100px;
    text-align: center;
    position: relative;
}
div:before,
div:after{
    position: absolute;
    font-size: 50px;
    color: #FFFFFF;
    font-weight: 700;
}
div:before{
    content: '\201c';
     top: 0; left: 10px;    
}
div:after{
    content: '\201d';
    bottom: 0; right: 10px;    
}

<div>text</div>

Answer 2

You could do this two ways, one requires extra HTML markup and the other is to use CSS before and after pseudo classes. I have created two example blockquotes below, the first is using span elements with the open and close classes respectively that we can then position absolute within the block quote element. The second example uses :before and : after pseudo classes. Check the "Can I use" website to check the browsers you need to support are listed : http://caniuse.com/#feat=css-gencontent

Here is a Fiddle showing the blockquotes. Feel free to play around to match colours and font sizes etc...

All the best

HTML

<blockquote class="example1">
    <span class="open">&ldquo;</span>
    Sumdev<br/>StackOverflow is da best
    <span class="close">&rdquo;</span>
</blockquote>

<blockquote class="example2">Sumdev<br/>StackOverflow is da best</blockquote>

CSS

blockquote {
    background: blue;
    color: white;
    padding: 20px 40px;
    position: relative;
    font-size: 20px;
}

.example1 span {
    position: absolute;
}

.example1 .open {
    top: 10px;
    left:10px;
}

.example1 .close {
    bottom: 0;
    right:10px;
}

.example2::before {
    content: '“';
    position: absolute;
    top:10px;
    left: 10px;
}
.example2::after {
    content: '”';
    position: absolute;
    bottom:0;
    right: 10px;
}