CodePen

HTML

            
              <section id="messages">
  
	<p class="pinned">
    <span>‌‌“</span>I am a pinned message.
    <span>‌‌”</span>
  </p>
  
	<p>
    <span>‌‌“</span>I am a regular message.
    <span>‌‌”</span>
  </p>

</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body
{ background: #333 url(/images/classy_fabric.png); }

#messages p
{
	width:260px;
  padding:30px;
  background: #fff;
  margin:20px;
  position:relative;
}
#messages p:before {
   content: "";
   position:absolute;
   top: 20px; left: -12px;
   border-right: 12px solid white;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent; 
}
#messages p span
{
  color:#888;
  font-size:24px; font-weight:bold;
  position:absolute;
}
#messages p span:first-child
{ left:16px; top:16px; }
#messages p span:last-child
{ right:16px; bottom:16px; }

#messages p.pinned:after
{
  content:"Pinned";
  width:56px; height:16px;
  text-align:center; color: #fff;
  font-family:Arial; font-size:11px;
  background: #2d4d20;
  position:absolute;
  right:-6px; top:-6px;
  border: 1px solid #aaa; border-radius:6px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................