<div id="ct">
  <div class="corner "id="left_top"></div>
  <div class="corner" id="left_bottom"></div>
  <div class="corner" id="right_top"></div>
  <div class="corner" id="right_bottom"></div>
  <span>Winston Churchill</span>
  <blockquote>
    <p><i>&ldquo;Success consists of going from failure to failure without loss of enthusiasm.&rdquo; </i></p>
  </blockquote>
</div>

body{background:#1D1F20;}
#ct{height:150px; width:370px;border:1px solid #f1c40f;margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;}
span{
  background:#1D1F20;
  color:#f1c40f;
  padding:0 10px;
  font-size:20px;
  position:relative; 
  top:-28px;
}
.corner{height:30px;
  width:30px;
  border-radius:50%;
  border:1px solid #fff;
  transform:rotate(-45deg);  
  position:absolute;
  background:#1D1F20;
}

#left_top{
  top:-16px;
  left:-16px;
  border-color:transparent transparent #f1c40f transparent;
}
#right_top{
  top:-16px;
  right:-16px;
  border-color:transparent transparent transparent #f1c40f;
}
#left_bottom{
  bottom:-16px;
  left:-16px;
  border-color:transparent #f1c40f transparent transparent ;
}
#right_bottom{
  bottom:-16px;
  right:-16px;
  border-color:#f1c40f transparent transparent transparent;
}
p{padding-top:13px;font-size:18px}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.