<div class="quote">
  <blockquote>
    <p>A quote without any reference.</p>
  </blockquote>
</div>

<div class="quote">
  <blockquote>
    <p>While some see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.</p>
    <cite>Steve Jobs</cite>
  </blockquote>
</div>

<div class="quote">
  <blockquote>
    <p>Everyone has a plan until they get punched in the face.</p>
    <cite>Mike Tyson</cite>
  </blockquote>
</div>

body {
  padding: 50px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 21px;
}

.quote {
  background: url(http://s11.postimage.org/p86ypdffz/quote_bg.jpg);
  width: 620px;
  box-sizing: border-box;
  margin-bottom: 40px;
  color: #e3e3e3;
  box-shadow: inset 0 0 0 7px rgba(255,255,255, 0.07), 4px 4px 4px rgba(0,0,0,0.15);
  position: relative;
  
  blockquote {
    padding: 35px 80px;
    margin: 0;
    
    
    p {
      margin: 0;
      font-size: 24px;
      line-height: 1.25;
    }
    
    cite {
      display: block;
      text-align: right;
      margin-top: 15px;
      
      a {  
        color: inherit;
        text-decoration: underline;
        
        &:hover {
          text-decoration: none;
        }
        
      }
      
      &:before{
        content: '~';
        margin-right: 7px;
      }
    }
    
  }
  
   &:before {
      content: '';
      background: url(http://s11.postimage.org/9lfpc01nz/quote.png) no-repeat;
      width: 57px;
      height: 43px;
      position: absolute;
      left: 11px;
    }
  
  &:after {
    content: '';
    background: url(http://s11.postimage.org/9lfpc01nz/quote.png) -84px 0px no-repeat;
     width: 57px;
      height: 43px;
      position: absolute;
      bottom: 0;
      right: 11px;
   }
  
}